/* Clear, untinted glass. Label halos preserve legibility over light artwork. */
:root{--clear:var(--nav-clear,calc(var(--topH) + 1.5rem))}
html{scroll-padding-top:var(--nav-clear,80px);scroll-padding-bottom:calc(var(--tabsH,0px) + 12px)}
:where(button,a,input,[tabindex]){scroll-margin-top:var(--nav-clear,80px);scroll-margin-bottom:calc(var(--tabsH,0px) + 12px)}
.top{top:max(8px,env(safe-area-inset-top,0px));max-width:calc(100% - 24px);min-height:0;
  gap:6px;padding:5px;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid #ffffff29;
  box-shadow:0 3px 14px #0002,inset 0 1px 0 #ffffff0a;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.top .tabs{gap:3px;min-width:0}
.top .navtab{min-height:44px;min-width:44px;padding:8px 13px;gap:8px;border-radius:999px;
  font-size:.84rem;font-weight:650;letter-spacing:0;text-transform:none;color:#fff;
  text-shadow:0 1px 2px #000,0 0 1px #000,1px 0 1px #000b,-1px 0 1px #000b;
  transition:color .18s ease,background .18s ease,transform .16s ease}
.top .navtab .nt-i svg{width:1.25rem;height:1.25rem}
.top .navtab.on{color:#111;text-shadow:none}
.top .navtab:not(.on) .nt-i{filter:drop-shadow(0 1px 1px #000)}
.top .navtab:hover:not(.on){background:#ffffff0d;color:#fff}
.top .tabs .tabpill{border-radius:999px;background:#fffffff2;box-shadow:0 1px 3px #0002;transition:transform .22s var(--ease),width .22s var(--ease),height .22s var(--ease),opacity .15s}
.top .navtab:active{transform:scale(.97)}
.top .backin{flex:none;margin:0;min-width:44px;min-height:44px;width:44px;height:44px;border-radius:999px;background:#ffffff0b}
.top[data-density="compact"] .navtab{padding-inline:8px;gap:5px;font-size:.78rem}
.top[data-density="compact"] .tabs{gap:1px}
.top[data-density="icons"] .navtab{padding-inline:9px}
.top[data-density="icons"] .navtab .nt-l{display:none}
.tabs .navtab:focus-visible,.top .backin:focus-visible,.screen>.topback:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tabs .navtab:focus-visible,.top .backin:focus-visible,.screen>.topback:focus-visible{box-shadow:0 0 0 4px #000}
.top .navtab.on:focus-visible{outline-color:#fff;outline-offset:2px}
.screen>.topback{width:46px;height:46px;border-radius:999px;background:rgba(0,0,0,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);left:max(12px,env(safe-area-inset-left,0px));top:max(8px,env(safe-area-inset-top,0px))}
.screen>.body-clear,.screen.nav-has-back>.body-clear{padding-top:var(--nav-clear,80px)}
@media(pointer:coarse) and (min-width:701px){.top .navtab,.top .backin{min-height:48px;min-width:48px}}
@media(max-width:700px){
  .top{display:none}
  .screen>.tabs{box-sizing:border-box;gap:2px;padding:5px max(4px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));
    background:rgba(0,0,0,.22);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid #ffffff20;box-shadow:0 -4px 18px #0002;
    transition:opacity .18s ease,transform .18s ease}
  .screen>.tabs .navtab{min-height:56px;min-width:0;padding:3px 1px;gap:4px;border-radius:12px;color:#fff;text-shadow:0 1px 2px #000,0 0 1px #000,1px 0 1px #000b,-1px 0 1px #000b;font-weight:600;touch-action:manipulation}
  .screen>.tabs .nt-i{padding:5px 12px;border-radius:11px;transition:background .18s ease,box-shadow .18s ease}
  .screen>.tabs .nt-i svg{width:21px;height:21px;filter:drop-shadow(0 1px 1px #000)}
  .screen>.tabs .nt-l,.screen>.tabs .navtab.on .nt-l{font-size:max(10px,.67rem);line-height:1.15;letter-spacing:0;font-weight:600}
  .screen>.tabs .navtab.on{color:#fff}
  .screen>.tabs .navtab.on .nt-i{background:#ffffff17;box-shadow:inset 0 0 0 1px #ffffff16}
  .screen>.tabs .navtab:active{transform:scale(.97)}
  .screen>.tabs.nav-keyboard{opacity:0;transform:translateY(100%);pointer-events:none}
  .screen{padding-bottom:calc(var(--tabsH,70px) + 12px)}
  .screen>.body-clear,.screen.nav-has-back>.body-clear{padding-top:var(--nav-clear,10px)}
}
@media(prefers-reduced-motion:reduce){.top .tabs .tabpill,.top .navtab,.screen>.tabs,.screen>.tabs .nt-i{transition:none!important}.tabs .navtab:active{transform:none}}

/* Explicit accessibility preferences take priority over decorative transparency. */
@media(prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .top,.screen>.topback,.screen>.tabs{background:rgba(0,0,0,.85)}
  .top .navtab,.screen>.tabs .navtab{text-shadow:none}
}
@media(forced-colors:active){
  .top,.screen>.topback,.screen>.tabs{background:Canvas;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid CanvasText}
  .top .navtab,.screen>.tabs .navtab,.top .backin,.screen>.topback{color:CanvasText;text-shadow:none;filter:none}
  .top .tabs .tabpill{background:Highlight;forced-color-adjust:none}
  .top .tabs .navtab.on{color:HighlightText;forced-color-adjust:none}
  .tabs .nt-i,.tabs .nt-i svg{filter:none!important}
  .tabs .navtab:focus-visible,.top .backin:focus-visible,.screen>.topback:focus-visible{outline-color:Highlight;box-shadow:none}
}

/* Both drawings occupy the same box, so selection never shifts the label. */
.tabs .nav-symbol .nav-outline,.tabs .nav-symbol .nav-solid{transition:opacity .16s ease}
.tabs .nav-symbol .nav-outline{opacity:1}
.tabs .nav-symbol .nav-solid{opacity:0}
.tabs .navtab.on .nav-outline{opacity:0}
.tabs .navtab.on .nav-solid{opacity:1}
@media(prefers-reduced-motion:reduce){.tabs .nav-symbol .nav-outline,.tabs .nav-symbol .nav-solid{transition:none}}