#site-nav,.watch-nav{width:min(1100px,100%);margin:0 auto 10px;position:relative;z-index:var(--z-nav,20);font:12px/1.4 'IBM Plex Mono',monospace}.nav-bar,.nav-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;background:#f3eee2;border:3px double #9c8a70;padding:4px}.nav-bar button,.nav-steps button,.nav-bar a,.nav-index summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:0;padding:9px 12px;border:0;background:transparent;color:#49351c;font:inherit;letter-spacing:0;text-decoration:none;cursor:pointer}.nav-bar button:first-child span{margin-left:8px}.nav-bar [aria-current=page],.nav-steps [aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.nav-index{position:relative}.nav-index summary{list-style:none}.nav-index summary::-webkit-details-marker{display:none}.nav-index summary:after{content:' ▾'}.nav-index ol{position:absolute;right:0;top:100%;z-index:var(--z-menu,21);width:min(310px,calc(100vw - 24px));max-height:min(60vh,600px);overflow:auto;margin:0;padding:5px;list-style:none;background:#f3eee2;border:3px double #9c8a70;box-shadow:0 6px 16px #0004}.nav-index li button,.nav-index li a{width:100%;text-align:left}.nav-steps{justify-content:space-between;border-top:0}.nav-steps>span{padding:5px}.nav-bar :focus-visible,.nav-steps :focus-visible,.skip-link:focus-visible{outline:3px solid #6b4a1e;outline-offset:2px}.skip-link{position:fixed;left:8px;top:8px;z-index:var(--z-overlay,1000);clip-path:inset(50%);background:#f3eee2;color:#1b1815;padding:14px}.skip-link:focus{clip-path:none}@media(max-width:600px){#site-nav,.watch-nav{margin-bottom:0}.nav-bar,.nav-steps{gap:0}.nav-bar button,.nav-steps button,.nav-bar a,.nav-index summary{padding:9px 8px}.nav-steps{font-size:10px}}@media print{#site-nav,.watch-nav,.skip-link{display:none!important}}
.profile-menu{margin-left:auto;position:relative}.profile-menu summary{display:grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer;list-style:none}.profile-menu summary::-webkit-details-marker{display:none}.profile-menu .profile-popover{display:block;top:48px}.profile-menu button{min-height:44px}.profile-menu summary:focus-visible,a:focus-visible{outline:3px solid #6b4a1e;outline-offset:2px}.entry-page .shelf,.entry-page .ribbon,.entry-page .bin-area{display:none}.entry-page .shelf-list{color:var(--ink)}.clue-letter,.shelf-board .clue-letter{min-width:44px;min-height:44px}.shelf-list{color:var(--ink)}.shelf-list a{color:#6b4a1e}.shelf-list li{border-color:#c9bda7}@media(max-width:600px){.auth-avatar{width:44px;height:44px}.nav-bar{max-width:100%}.profile-menu{margin-left:auto}}
.toss{width:44px;height:44px;min-height:44px;padding:13px}
.preview-badge{position:fixed;z-index:var(--z-overlay,1000);right:12px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:8px;background:#f6f0e3;color:#1b1815;border:2px solid #6b4a1e;box-shadow:0 3px 12px #0005;font:12px/1.4 'IBM Plex Mono',monospace}.preview-badge strong{padding:0 6px}.preview-badge button{min-height:44px;min-width:44px;padding:8px 10px;border:1px solid #6b4a1e;background:#fffaf0;color:#1b1815;font:inherit;cursor:pointer}.preview-badge button:focus-visible{outline:3px solid #6b4a1e;outline-offset:2px}@media print{.preview-badge{display:none!important}}

/* Route targets are not controls; preserve focus indicators on controls. */
[tabindex="-1"]:not(:is(a,button,input,select,textarea,summary,[role="button"],[role="link"],[role="radio"])):focus,
[tabindex="-1"]:not(:is(a,button,input,select,textarea,summary,[role="button"],[role="link"],[role="radio"])):focus-visible{outline:none}

/* The watch page loads this shared sheet and has its own paper markup. */
body:has(.watch-nav) main{min-height:calc(100dvh - 100px);display:flex;flex-direction:column}
body:has(.watch-nav) .paper{flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:600px){body:has(.watch-nav) main{min-height:calc(100dvh - 60px)}}

/* Letter CSS is maintained separately; keep its modal on the shared scale. */
.letter-overlay{z-index:var(--z-overlay,1000)}

.nav-bar button:disabled{opacity:.45;cursor:default}

@media (min-width:601px){:root{--nav-h:68px}}

@media(max-width:600px){.nav-index ol{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:70dvh;overflow:auto}}