.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Opened from the home screen the app runs full-screen: under the status bar and, held sideways,
   beside the notch. Inset the page, stick the app bar below the status bar, and back that strip
   with the page colour (dark in light mode, since the status bar text there is always white). */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body:after{content:"";position:fixed;top:0;left:0;right:0;z-index:44;height:env(safe-area-inset-top);background:var(--bg);pointer-events:none}
html.light body:after{background:var(--ink)}

/* App bar. Sticky at every width; the masthead scrolls away above it. */
.appbar{position:sticky;top:env(safe-area-inset-top);z-index:40;display:flex;align-items:center;gap:12px;
  min-height:56px;margin:0 0 4px;background:var(--bg);
  transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.appbar-burger{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;margin-left:-10px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .16s ease}
.appbar-burger:hover{background:var(--line)}
.appbar-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.burger{display:grid;gap:4px;width:18px}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .18s ease}
.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .burger i:nth-child(2){opacity:0}
.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.appbar-title{font:11px "SF Mono",Menlo,monospace;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* A persistent way home, distinct from the hamburger's side menu. Filled when
   you are already there, so it also answers "where am I" at a glance. */
.appbar-home{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;border:0;border-radius:10px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .16s ease,color .16s ease}
.appbar-home:hover{background:var(--line);color:var(--ink)}
.appbar-home:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.appbar-home.on{color:var(--accent);background:rgba(224,138,95,.1)}
.home-glyph{font-size:19px;line-height:1}

/* Desktop: the row stays for zero-click nav, the hamburger folds it away. */
html.nav-collapsed #tabs{display:none}

/* Scrim and drawer are inert until opened, so they never eat a stray tap. */
.nav-scrim{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility 0s linear .26s}
.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .26s ease,visibility 0s}
/* visibility 0s linear .3s on close keeps the panel on screen while it slides
   out; on open it flips at once, which is what lets focus move into it. */
.nav-drawer{position:fixed;z-index:49;background:var(--panel);border:1px solid var(--line);
  visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.3,1),visibility 0s linear .3s}
.nav-open .nav-drawer{visibility:visible;transform:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),visibility 0s}
/* A dragged panel follows the finger exactly. Any transition here turns the
   gesture to rubber. */
.nav-dragging .nav-drawer,.nav-dragging .nav-scrim{transition:none!important}
.nav-dragging{touch-action:pan-y}
.nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 14px 12px;border-bottom:1px solid var(--line)}
.nav-head-title{font:10px "SF Mono",Menlo,monospace;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);line-height:1.4}
.nav-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;
  width:40px;height:40px;margin:-8px -6px -8px 0;border:0;border-radius:10px;
  background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.nav-close:hover{background:var(--line);color:var(--ink)}
.nav-close:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-drawer ul{list-style:none;margin:0;padding:8px}
.nav-drawer li{margin:0}
.nav-drawer [data-nav]{display:flex;align-items:center;width:100%;min-height:52px;
  padding:14px 16px;border:0;border-radius:10px;background:transparent;color:var(--ink);
  font:inherit;font-size:16px;text-align:left;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.nav-drawer [data-nav]:hover{background:var(--line)}
.nav-drawer [data-nav].on{color:var(--accent);font-weight:700;background:rgba(224,138,95,.1)}
.nav-drawer [data-nav]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Phone: the app bar is the only chrome, and it gets out of the way on the
   way down. Drawer comes up from the bottom, where the thumb is. */
@media(max-width:767px){
  /* mobile-app.css is injected AFTER this file and sets #tabs{display:grid!important}.
     Equal specificity would hand it the win on source order, so out-specify it. */
  html #tabs{display:none!important}
  .appbar{margin:0 -16px 8px;padding:0 16px;border-bottom:1px solid var(--line)}
  .nav-hidden .appbar{transform:translateY(-100%)}
  .nav-drawer{top:0;bottom:0;left:0;width:min(290px,80vw);border-left:0;border-radius:0 16px 16px 0;
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    transform:translateX(-100%);box-shadow:18px 0 50px rgba(0,0,0,.45)}
  .nav-head{padding-top:calc(16px + env(safe-area-inset-top))}
  /* The strip the opening swipe starts from. Nothing visible, just a promise
     that a drag beginning here belongs to the drawer. */
  .nav-drawer,.nav-scrim{touch-action:pan-y}
  /* Bottom tab bar: where the thumb is. Content and toasts clear it. */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px env(safe-area-inset-bottom);border-top:1px solid var(--line);
    background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;
    border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.1px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:color .16s ease}
  .tabbar button.on{color:var(--accent)}
  .tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .tabbar .nav-icon{width:24px;height:24px}
  html .shell{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  html .cc-toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
  /* The bar carries navigation now, so the app bar is a quiet title strip. */
  .appbar-title{font-family:inherit;font-size:17px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
}
.tabbar{display:none}
@media(max-width:767px){.tabbar{display:grid}}
.nav-icon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-icon-dots{stroke-width:3.2}
.nav-drawer [data-nav]{gap:14px}

/* Desktop: a side panel, though the row is usually enough. */
@media(min-width:768px){
  .nav-drawer{top:0;bottom:0;left:0;width:min(300px,82vw);border-left:0;
    transform:translateX(-100%);box-shadow:24px 0 60px rgba(0,0,0,.4);
    padding-top:12px;padding-left:env(safe-area-inset-left);overflow-y:auto}
}

@media(prefers-reduced-motion:reduce){
  .appbar,.nav-drawer,.nav-scrim,.burger i,.tabbar button{transition-duration:.01s}
}

/* Reuse the existing persisted theme control beside Settings at every width. */
.appbar .appbar-theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;margin-left:auto;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:24px}
.appbar .appbar-theme .theme-icon{font-size:24px;line-height:1}
.appbar .appbar-theme:hover{background:var(--line);color:var(--ink)}
.appbar .appbar-theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.appbar-theme + .appbar-settings{margin-left:0}