/* One trigger width also reserves space for neighbouring header actions. */
:root{--section-menu-width:78px}
/* Shared navigation owns its reset; page component resets must not supply it. */
:where(#section-menu-button, .section-menu, .section-menu *){box-sizing:border-box}
:where(.section-menu) button{font:inherit;cursor:pointer;color:inherit}
/* Fixed navigation stays above page content and below native dialogs. */
#section-menu-button{position:fixed;z-index:1000;top:calc(22px + env(safe-area-inset-top));right:max(16px,calc((100vw - 690px)/2 + 20px));width:var(--section-menu-width);height:44px;min-width:var(--section-menu-width);min-height:44px;display:flex;align-items:center;justify-content:center;flex:none;gap:6px;padding:0 10px;border:1px solid #ffffff38;border-radius:24px;background:#092332bf;color:#fff;font:500 13px/1 system-ui,sans-serif;letter-spacing:.015em;box-shadow:0 2px 6px #06192512;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#section-menu-button .section-menu-icon{display:grid;place-items:center;flex:none;width:16px;height:14px;font-size:0}
#section-menu-button .section-menu-icon::before{content:"";display:block;width:16px;height:1.5px;border-radius:1px;background:currentColor;box-shadow:0 -5px currentColor,0 5px currentColor}
#section-menu-button .section-menu-label{font:inherit;white-space:nowrap}
@media(hover:hover){#section-menu-button:hover{background:#123b4ee6;border-color:#ffffff70}}
#section-menu-button:focus-visible{outline:3px solid var(--brand-focus, #0066cc);outline-offset:3px}
.section-menu{position:fixed;inset:calc(16px + env(safe-area-inset-top)) max(16px,calc((100vw - 690px)/2 + 16px)) auto auto;margin:0;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 32px - env(safe-area-inset-top));padding:20px;border:1px solid var(--brand-border);border-radius:20px;background:var(--brand-surface,#fff);color:var(--brand-ink);box-shadow:0 20px 70px #06192540;overflow:auto}
.section-menu::backdrop{background:#06192566}
.section-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.section-menu h2{margin:0;font-size:19px;letter-spacing:-.02em}
.section-menu-close{width:44px;height:44px;border:0;border-radius:11px;background:var(--brand-soft);color:var(--brand-ink);font-size:25px;line-height:1}
.section-menu p{margin:0 0 15px;color:var(--brand-muted);font-size:13px}
.section-menu nav{display:grid;gap:5px}
.section-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px;border-radius:11px;color:var(--brand-ink);text-decoration:none;font-size:15px;font-weight:600;background:var(--brand-background)}
.section-menu a::after{content:'↓';color:var(--brand-muted);font-weight:400}
.section-menu a[href^="/players"]::after,.section-menu a[href="/han-boon-run/"]::after,.section-menu a[href="/net-sniper-kean/"]::after{content:'→'}
.section-menu a:hover{background:var(--brand-soft)}
.section-menu a:focus-visible,.section-menu-close:focus-visible{outline:3px solid var(--brand-focus);outline-offset:2px}

/* Home uses its existing link dividers and desktop anchor. Profile actions stay in flow. */
:where(.home-navigation-page) .section-menu a{border-bottom:1px solid var(--brand-border)}
:where(.home-navigation-page) .section-menu a:last-child{border-bottom:0}
.player-page .player-header #section-menu-button{position:static;flex:none}

/* Separate page navigation from dashboard sections, which follow widget order. */
.section-menu nav>a[href^="/players"]{margin-bottom:8px}

/* Tournament event rows inside the shared disclosure. */
.tournament-menu{border-radius:12px;background:var(--brand-background)}
.section-menu .tournament-menu-event::after{content:none}
.section-menu .tournament-menu-event{min-height:52px;gap:8px;padding:9px 10px;background:transparent;font-size:14px;font-weight:500}
.tournament-menu-name{min-width:0}
.tournament-menu-meta{display:flex;align-items:flex-end;flex-direction:column;flex-shrink:0;gap:3px;font-size:11px;font-weight:400;color:var(--brand-muted);font-variant-numeric:tabular-nums}
.section-menu .tournament-menu-event[data-highlighted]{background:var(--brand-soft, #edf4ff);color:#185bc1;font-weight:600}
.tournament-menu-badge{font-size:10px;font-weight:600;color:#185bc1}

/* Isolate shared navigation from standalone tracker/prototype styles. */
.app-navigation-page{--brand-border:#d8dbe3;--brand-ink:#0a1e2d;--brand-soft:#f2f2f7;--brand-muted:#666875;--brand-background:#f2f2f7;--brand-focus:#0066cc}
.app-navigation-page .section-menu{font:15px/1.4 system-ui,sans-serif;letter-spacing:normal;max-width:none}
.app-navigation-page .section-menu nav{grid-template-columns:minmax(0,1fr);padding:0;background:transparent;border-radius:0}
.app-navigation-page .section-menu button{font-family:inherit}
.app-navigation-page .section-menu-close{padding:0;font-size:25px;font-weight:400}
.app-navigation-page .section-menu h2{line-height:1.3;margin:0}
.app-navigation-page .section-menu a{box-shadow:none}
.app-navigation-page .section-menu a[href="/"]::after,.app-navigation-page .section-menu a[href="/top-15/"]::after{content:'→'}
.tracker-navigation-page #section-menu-button{right:max(16px,calc(100vw - 614px))}
.tracker-navigation-page .section-menu{right:max(16px,calc(100vw - 626px))}
.top15-navigation-page #section-menu-button{right:max(16px,calc((100vw - 460px)/2 + 18px));top:calc(12px + env(safe-area-inset-top))}
.top15-navigation-page .section-menu{right:max(16px,calc((100vw - 460px)/2 + 12px))}
.top15-navigation-page .masthead,.top15-navigation-page .detail-top{padding-right:calc(var(--section-menu-width) + 14px)}
.top15-navigation-page .preview{font-size:7px;letter-spacing:.02em}
@media(min-width:600px){.top15-navigation-page #section-menu-button{top:40px}}

.section-menu .menu-number{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:#edf2fb;color:#557296;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.section-menu .menu-label{flex:1;min-width:0}

/* Five primary rows; secondary destinations stay behind explicit disclosures. */
.navigation-group{border-radius:11px;background:var(--brand-background)}
.navigation-row{display:flex;align-items:stretch;min-width:0}
.section-menu .navigation-main{display:flex;flex:1;min-width:0;align-items:center;justify-content:flex-start;flex-direction:row;gap:10px;min-height:50px;padding:12px;border:0;border-radius:11px 0 0 11px;background:transparent;white-space:nowrap}
.section-menu .navigation-main::after{content:none}
.section-menu .navigation-main .menu-label{display:block;white-space:nowrap}
.navigation-toggle{display:grid;place-items:center;flex:0 0 42px;min-height:50px;padding:8px;border:0;border-left:1px solid #d8dbe380;border-radius:0 11px 11px 0;background:transparent;color:var(--brand-muted);cursor:pointer;font:inherit}
.navigation-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.navigation-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.navigation-toggle:focus-visible{outline:3px solid var(--brand-focus);outline-offset:2px}
.navigation-toggle:hover{background:var(--brand-soft)}
.section-menu .navigation-full{display:flex;flex:1;align-items:center;gap:10px;border:0;border-radius:11px;padding:12px;color:var(--brand-ink);font-size:15px;font-weight:600;text-align:left}
.navigation-full .menu-label{flex:1}
.navigation-list{padding:3px 8px 8px;background:#fff;border:1px solid var(--brand-border);border-top:0;border-radius:0 0 11px 11px}
.navigation-list[hidden]{display:none}
.section-menu .navigation-list a{background:transparent;font-size:14px;font-weight:500;min-height:46px;padding:10px;gap:8px}
.section-menu .navigation-list .tournament-menu-event[data-highlighted]{background:#edf4ff;color:#185bc1;font-weight:600}
.section-menu .navigation-secondary{margin-top:9px;border-top:1px solid var(--brand-border);padding-top:12px;border-radius:0;background:transparent}
.navigation-secondary .navigation-row{background:var(--brand-background);border-radius:11px}
.section-menu .navigation-home{background:transparent;font-size:14px;min-height:44px;margin-bottom:4px;padding:6px 10px;color:var(--brand-muted)}
.section-menu .navigation-home::after{content:'→'}
@media(max-width:360px){.section-menu{padding:14px}.section-menu .navigation-main{font-size:14px;gap:8px;padding:10px}.navigation-toggle{flex-basis:38px}.section-menu .menu-number{width:24px;height:24px}}
.section-menu nav>a::after{content:'→'}

/* Desktop controls follow each centred page, with the same top/right inset. */
@media(min-width:601px){
 .home-navigation-page .section-menu{right:max(16px,calc((100% - 690px)/2 + 16px))}
 .home-navigation-page .hero #section-menu-button{right:max(20px,calc((100% - 690px)/2 + 20px))}
 .top15-navigation-page #section-menu-button{top:calc(22px + env(safe-area-inset-top));right:max(20px,calc((100% - 690px)/2 + 20px))}
 .top15-navigation-page .section-menu{right:max(16px,calc((100% - 690px)/2 + 16px))}
 .tracker-navigation-page #section-menu-button{top:calc(22px + env(safe-area-inset-top));right:max(32px,calc((100% - 618px)/2 + 20px))}
 .tracker-navigation-page .section-menu{right:max(28px,calc((100% - 618px)/2 + 16px))}
}

/* Cross-links sit beside the shared menu and within the relevant match or player card. */
.app-navigation-page .tennis-cross-link{
 display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#1459ad;
 font-size:14px;font-weight:650;line-height:1.25;text-decoration:none
}
.app-navigation-page .tennis-cross-link:hover{text-decoration:underline}
.app-navigation-page .tennis-cross-link:focus-visible{outline:2px solid #1459ad;outline-offset:2px;border-radius:6px}
.tennis-cross-link [aria-hidden]{font-size:19px;line-height:1}
.app-navigation-page .tennis-home-link{flex:none;min-width:44px;margin-right:auto}
.top15-navigation-page .tennis-page-shortcut{margin-left:auto}
.top15-navigation-page .player-dashboard .detail-top{padding-right:calc(var(--section-menu-width) + 8px);gap:6px}
.tracker-navigation-page .tennis-tracker-masthead{
 display:flex;justify-content:flex-end;gap:8px;padding:calc(21px + env(safe-area-inset-top)) calc(var(--section-menu-width) + 32px) 6px 16px
}
.app-navigation-page .tennis-card-link{
 display:flex;width:fit-content;max-width:100%;margin-top:8px;padding:0 10px;
 border-radius:8px;background:#edf4ff;white-space:normal
}
.tracker-navigation-page #journey .tennis-card-link{margin-bottom:10px}
.tracker-navigation-page .card[data-linked-match]{outline:2px solid #1459ad;outline-offset:2px;scroll-margin-top:72px}

/* The Masters list is a second view within the same navigation drawer. */
.section-menu nav[hidden]{display:none}
.section-menu .masters-menu-entry,.section-menu .masters-menu-back{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--brand-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.section-menu .masters-menu-entry{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:10px;text-align:left}
.section-menu .masters-menu-back{padding:8px;color:var(--brand-focus)}
.section-menu .masters-menu-entry:hover,.section-menu .masters-menu-back:hover{background:var(--brand-soft)}
.section-menu .masters-menu-entry:focus-visible,.section-menu .masters-menu-back:focus-visible{outline:3px solid var(--brand-focus);outline-offset:2px}
.masters-menu-entry>[aria-hidden],.masters-menu-back span{font-size:19px;line-height:1}
.masters-menu-entry>[aria-hidden]{color:var(--brand-muted)}
.masters-menu-entry .tournament-menu-meta{margin-left:auto;min-width:0;flex-shrink:1}
.masters-menu-entry .tournament-menu-meta[hidden]{display:none}
.masters-menu-featured-name{text-align:right}
.section-menu .masters-menu-entry[data-highlighted]{background:#edf4ff;color:#185bc1}
.section-menu .masters-menu-panel a.tournament-menu-event{padding-inline:8px}
.section-menu .masters-menu-panel a.tournament-menu-event[data-highlighted]{background:#edf4ff;color:#185bc1;font-weight:600}
.masters-menu-heading{padding:8px 10px 12px}
.masters-menu-panel ul{margin:0;padding:0 12px;border-radius:11px;background:var(--brand-background);list-style:none}
.masters-menu-panel li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;font-size:14px;font-weight:500}
.masters-menu-panel li+li{border-top:1px solid var(--brand-border)}
.masters-menu-panel li:has(>a){padding-block:0}
.masters-menu-panel li>a{min-height:44px;flex:1;gap:8px;padding:0;border:0;background:transparent;color:var(--brand-action);font:inherit}
.masters-menu-panel li>a>.tournament-menu-meta{margin-inline-start:auto}

/* Keep the longer trigger beside the profile actions on common phone widths. */
@media(max-width:430px){.player-page .player-brand{font-size:clamp(20px,5.4vw,23px)}}
@media(min-width:541px) and (max-width:649px){
 .player-header .share-hero-label{display:none}
 .player-header #share-hero{--share-control-size:44px;height:var(--share-control-size);flex:none}
}

/* Match the ranking overview's one-pixel frame adjustment at this breakpoint. */
@media(width:600px){.top15-navigation-page .player-dashboard{padding-top:11px}}

/* Leave a one-pixel rounding margin above the minimum 44px touch target. */
.tracker-navigation-page .tennis-page-shortcut{box-sizing:border-box;min-width:44px;height:45px;min-height:45px;padding:0 4px;}