/* The Hub's navigation bar: the one place its look is defined, for the app's own bar
   (#scorecardApp .app-nav, index.html) and the bar on every separate page (.hub-nav,
   nav.js). Loaded last on each page so nothing else changes it: same font, sizes,
   colours and place everywhere. A floating bar at the bottom on phones, a row of tabs
   under the header on wider screens. */
:root{--hn-floor:#f5f5ef;--hn-court:#153f30;--hn-lime:#d5f188;--hn-card:#fffefa;--hn-ink:#17372c;--hn-muted:#63766c;--hn-home:#24754f;--hn-line:#dce3d7;--hn-chip:#edf1e8}
@media (prefers-color-scheme:dark){:root{--hn-floor:#10231d;--hn-court:#204831;--hn-card:#193229;--hn-ink:#f2f5e9;--hn-muted:#adbbaf;--hn-home:#bddf88;--hn-line:#334d3f;--hn-chip:#223e30}}

.hub-nav,#scorecardApp .app-nav{display:flex;gap:4px;box-sizing:border-box;max-width:1120px;margin:0 auto 18px;padding:7px 0;border:0;border-top:1px solid var(--hn-line);border-bottom:1px solid var(--hn-line);border-radius:0;background:transparent;box-shadow:none;position:static;-webkit-backdrop-filter:none;backdrop-filter:none}
.hub-nav{padding-left:26px;padding-right:26px}
.hub-nav a,#scorecardApp .app-nav .mini:not([hidden]){flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;min-height:43px;margin:0;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--hn-muted);font:600 12px/1.2 Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;box-shadow:none;-webkit-font-smoothing:auto}
.hub-nav svg,#scorecardApp .app-nav .ui-icon{display:block;width:18px;height:18px;flex:0 0 auto}
.hub-nav a[aria-current=page],#scorecardApp .app-nav .mini[aria-current="page"]:not([hidden]){background:var(--hn-chip);color:var(--hn-ink);font-weight:700}

@media (max-width:760px){
 .hub-nav,#scorecardApp .app-nav{position:fixed;z-index:45;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));top:auto;max-width:none;margin:0;padding:6px;border:1px solid color-mix(in srgb,var(--hn-line) 75%,transparent);border-radius:28px;background:var(--hn-card);background:color-mix(in srgb,var(--hn-card) 64%,transparent);-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 12px 34px -14px rgb(0 0 0 / .55)}
 .hub-nav a,#scorecardApp .app-nav .mini:not([hidden]){flex-direction:column;gap:4px;min-height:49px;padding:6px 3px;border-radius:22px;font-size:11px}
 .hub-nav svg,#scorecardApp .app-nav .ui-icon{width:20px;height:20px}
 .hub-nav a[aria-current=page],#scorecardApp .app-nav .mini[aria-current="page"]:not([hidden]){background:color-mix(in srgb,var(--hn-home) 15%,transparent);color:var(--hn-home)}
 body:has(.hub-nav){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
/* The app keeps two buttons it never shows (Fixtures and Score have other ways in). */
#scorecardApp .app-nav #navFixtures,#scorecardApp .app-nav #navScore{display:none}

/* The page header on every separate page (nav.js adds .hub-top), matching the app's
   top bar (.chrome in app.css, court.css, glass.css: same heights at each width): frosted, sticky, a round back pill, the shuttle mark and the page's name. */
body>header.hub-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:flex-start;gap:14px;box-sizing:border-box;min-height:calc(95px + env(safe-area-inset-top,0px));max-width:none;width:100%;margin:0;padding:calc(14px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px),calc((100% - 1120px)/2 + 26px)) 14px max(18px,env(safe-area-inset-left,0px),calc((100% - 1120px)/2 + 26px));background:var(--hn-floor);background:color-mix(in srgb,var(--hn-floor) 70%,transparent);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:0;border-bottom:1px solid color-mix(in srgb,var(--hn-line) 70%,transparent)}
body>header.hub-top>span{display:none}
/* Until nav.js has made the header (a moment after the page appears), keep the old
   "← Account" link and title out of sight so they never flash up. */
body>header:not([class])>*{visibility:hidden}
/* Links to other screens, as pills (nav.js adds .hub-link and .hub-links). */
.hub-links{display:flex;flex-wrap:wrap;gap:8px}
a.hub-link{display:inline-flex;align-items:center;gap:2px;min-height:38px;box-sizing:border-box;padding:0 8px 0 14px;border:1px solid var(--hn-line);border-radius:999px;background:var(--hn-card);color:var(--hn-ink);font:700 13px/1.2 Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-decoration:none;vertical-align:middle}
a.hub-link svg{display:block;flex:0 0 auto;width:18px;height:18px;color:var(--hn-muted)}
a.hub-link:active{transform:scale(.96)}
p>a.hub-link:not(:only-child){margin:2px 4px 2px 0}
body>header.hub-top span{font-size:inherit;letter-spacing:inherit;color:inherit}
.hub-back{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;min-height:40px;padding:0 14px 0 8px;border:1px solid color-mix(in srgb,var(--hn-line) 80%,transparent);border-radius:999px;background:var(--hn-card);background:color-mix(in srgb,var(--hn-card) 62%,transparent);color:var(--hn-ink);font:700 13px/1 Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 4px 14px -8px rgb(16 35 29 / .35)}
.hub-back[hidden]{display:none}
.hub-back svg{display:block;width:20px;height:20px}
.hub-back:active{transform:scale(.96)}
.hub-mark{display:flex;align-items:center;gap:10px;min-width:0;color:var(--hn-ink);text-decoration:none}
.hub-mark>svg{flex:0 0 auto;width:38px;height:38px;box-sizing:border-box;padding:8px;border-radius:12px;background:var(--hn-court);color:var(--hn-lime);transform:rotate(-14deg)}
.hub-mark div{min-width:0}
.hub-mark b{display:block;font:800 21px/1.15 Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.hub-mark small{display:block;margin-top:2px;color:var(--hn-muted);font:600 9px/1.2 Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:.17em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-color-scheme:dark){.hub-back{box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 12px 34px -14px rgb(0 0 0 / .7)}}
@media (max-width:760px){body>header.hub-top{min-height:calc(83px + env(safe-area-inset-top,0px));gap:10px;padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}.hub-mark b{font-size:18px}.hub-mark>svg{width:32px;height:32px;padding:7px}}
/* Narrow phones, as in the app: with a back pill, the mark shortens to "H&P". */
@media (max-width:520px){body>header.hub-top{min-height:calc(79px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}.hub-back{min-height:38px;padding:0 12px 0 6px;font-size:12px}.hub-back:not([hidden])~.hub-mark>svg{display:none}.hub-mark b{font-size:17px}.hub-mark>svg{width:29px;height:29px}}
@media print{.hub-nav,#scorecardApp .app-nav{display:none}body>header.hub-top{position:static;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* A page shown inside the app's Account tab (nav.js adds .hub-embed): the app's own
   header and bar stay on screen, so the page drops its own and sits on the app. */
/* The app's floor colour (not see-through: browsers paint frames whose light or dark
   setting differs from the app's with a solid background anyway). */
.hub-embed,.hub-embed body{background:var(--hn-floor)!important}
.hub-embed body{padding:0!important;min-height:0!important;font-size:15px}
.hub-embed body>header,.hub-embed .hub-nav{display:none!important}
.hub-embed main{max-width:none!important;padding:0 0 28px!important}
/* Account already shows its label and title, so a tool's page starts at its own title. */
.hub-embed main>.eyebrow:first-child{display:none}
/* The tab's own title above the pills names the page, so the page's title is not repeated. */
.hub-embed main>h1{display:none!important}
.hub-visitor main>h1{display:block!important}.hub-visitor main>.eyebrow:first-child{display:block!important}
.hub-embed main>h1+p,.hub-embed main>.kit-intro:first-of-type{margin-top:2px}
.hub-embed .la-menu{position:static}
/* When the browser itself scrolls the app to a #part of a page in a frame, leave room for the app's header. */
.hub-embed [id]{scroll-margin-top:92px!important}
.hub-embed .me-links,.hub-embed #meSignOutTop,.hub-embed .kit-dup{display:none!important}

/* Smooth page changes (agreed 17 October 2026). nav.js runs at the end of each page, before it is first
   drawn, so its header and bar are there from the start; the header's space is kept so nothing jumps, and moving between pages cross-fades with the top
   bar and bottom bar staying put (browsers with page transitions: Safari 18.2+, Chrome). */
@view-transition{navigation:auto}
body>header.hub-top{view-transition-name:hub-top}
.hub-nav{view-transition-name:hub-bar}
/* Like the app's tabs: the header and bar stay locked (they change at once, no fade) and only the page
   under them moves: the old page goes, the new one slides in. */
::view-transition-group(hub-top),::view-transition-group(hub-bar),::view-transition-new(hub-top),::view-transition-new(hub-bar){animation:none}
::view-transition-old(hub-top),::view-transition-old(hub-bar){display:none}
::view-transition-old(root){animation:none;opacity:0}
::view-transition-new(root){animation:hubPageIn .22s ease-out both}
@keyframes hubPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body>header:not([class]){box-sizing:border-box;min-height:calc(95px + env(safe-area-inset-top,0px));border-bottom:1px solid color-mix(in srgb,var(--hn-line) 70%,transparent)}
@media (max-width:760px){body>header:not([class]){min-height:calc(83px + env(safe-area-inset-top,0px))}}
@media (max-width:520px){body>header:not([class]){min-height:calc(79px + env(safe-area-inset-top,0px))}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* The welcome page's kept pages (visitor.js): laid out out of sight while they load. */
/* overflow: pages waiting out of sight never make the page longer (no empty space at the end). */
.hub-frames{overflow:hidden;overflow:clip;position:relative;box-sizing:border-box;max-width:1120px;margin:0 auto;padding:12px 26px 0}
@media (max-width:760px){.hub-frames{padding:10px 18px 0}}
@media (max-width:520px){.hub-frames{padding:8px 14px 0}}
.hub-frames iframe.waiting{left:26px;right:26px;width:auto}
.hub-frames iframe{display:block;width:100%;border:0;background:transparent;color-scheme:light dark;overflow:hidden}
.hub-frames iframe.waiting{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;height:600px}
.hub-enter{animation:hubPageIn .22s ease-out both}
.hub-skeleton{display:grid;gap:12px;max-width:1120px;margin:20px auto;padding:0 18px}
.hub-skeleton[hidden]{display:none}
.hub-skeleton span{display:block;height:16px;border-radius:8px;background:var(--hn-chip)}
.hub-skeleton span:nth-child(2){height:96px;border-radius:18px}.hub-skeleton span:nth-child(3){height:140px;border-radius:18px}
@media (prefers-reduced-motion:reduce){.hub-enter{animation:none}}

/* Sign out, at the right of the header (app and separate pages). */
.hub-signout{flex:0 0 auto;width:auto;min-height:34px;margin:0 0 0 auto;padding:0 14px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.18));background:transparent;color:inherit;font:700 13px/1 Archivo,system-ui,sans-serif;cursor:pointer}
.hub-signout:hover{background:rgba(127,127,127,.12)}
#scorecardApp .sync-pill+.hub-signout{margin-left:8px}
@media (max-width:520px){.hub-signout{min-height:30px;padding:0 11px;font-size:12px}#scorecardApp .sync-pill+.hub-signout{margin-left:6px}}
@media (max-width:520px){#scorecardApp .sync-pill #syncLabel{display:none}#scorecardApp .sync-pill{min-width:0;padding:6px}}

/* Search and alerts (search.js): round buttons in the header, and a sheet that slides down. */
.hs-tools{display:flex;gap:6px;align-items:center;margin-left:auto}
.hs-tools+.hub-signout,.hs-tools+#headSignOut{margin-left:6px}
.hs-btn{position:relative;width:38px;height:38px;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(127,127,127,.4);border-color:color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit;cursor:pointer}
.hs-btn svg{width:19px;height:19px}
.hs-bell.has-new::after{content:attr(data-count);position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#d64541;color:#fff;font:800 11px/18px Archivo,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--hn-floor)}
html.hs-open{overflow:hidden}
.hs-sheet{position:fixed;inset:0;z-index:1000;background:rgba(8,20,14,.5);display:flex;justify-content:center;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 12px}
.hs-panel{width:min(560px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:var(--hn-card);color:var(--hn-ink);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.hs-head{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--hn-line)}.hs-head h2{flex:1;margin:0 4px;font-size:20px}
.hs-input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--hn-line);padding:0 16px;font:inherit;font-size:16px;background:var(--hn-floor);color:inherit}
.hs-close{min-height:40px;border-radius:999px;padding:0 14px;border:1px solid var(--hn-line);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.hs-body{overflow:auto;padding:4px 12px 14px}
.hs-group{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hn-muted);margin:14px 4px 4px}
.hs-row{display:grid;gap:2px;padding:10px 8px;border-radius:12px;text-decoration:none;color:inherit;border-bottom:1px solid var(--hn-line)}
.hs-row:hover,.hs-row:focus-visible{background:rgba(127,127,127,.1)}
.hs-row small{color:var(--hn-muted)}.hs-row span{font-size:14px}
.hs-row.new{border-left:4px solid #9bc46a;padding-left:10px}
.hs-hint{color:var(--hn-muted);margin:14px 4px}
@media (prefers-reduced-motion:no-preference){.hs-panel{animation:hsIn .25s ease-out}@keyframes hsIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}}
@media (max-width:420px){.hs-btn{width:34px;height:34px}.hs-btn svg{width:17px;height:17px}}
/* The name never shrinks under the header buttons; on the narrowest phones the buttons get smaller. */
.bar-in>.mark,.hub-top>.hub-mark{flex-shrink:0}
@media (max-width:360px){.hs-tools{gap:4px}.hs-btn{width:30px;height:30px}.hs-btn svg{width:15px;height:15px}.hub-signout{padding:0 10px!important;font-size:12px!important}.bar-in>.mark small,.hub-top>.hub-mark small{display:none}}
/* Narrow phones: Sign out becomes a round exit button beside search and alerts (its name stays for screen readers). */
@media (max-width:440px){
 .hub-top .hub-signout,.bar-in #headSignOut{position:relative;width:38px;min-width:38px;height:38px;padding:0!important;font-size:0!important;color:inherit;border-radius:50%;flex-shrink:0}
 .hub-top .hub-signout::before,.bar-in #headSignOut::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:360px){.hub-top .hub-signout,.bar-in #headSignOut{width:30px;min-width:30px;height:30px}}
@media (max-width:380px){.hub-top .hub-back{width:38px;min-width:38px;padding:0!important;justify-content:center}.hub-top .hub-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hub-top{gap:6px}}
.hs-alert{display:flex;align-items:flex-start;gap:8px;padding:0}.hs-alert .hs-go{flex:1;display:grid;gap:2px;padding:10px 8px;color:inherit;text-decoration:none;min-width:0}
.hs-alert.new{padding-left:0}.hs-alert.done .hs-go b,.hs-alert.done .hs-go span{opacity:.6}
.hs-done{color:var(--hn-home);font-weight:800}
.hs-dismiss{flex:0 0 auto;margin:10px 4px 0 0;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--hn-line);background:transparent;color:var(--hn-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hs-alert.going{opacity:.4;transition:opacity .2s}
.hs-clear{font-size:13px}