/* The /support agent widget mounts itself into <body>, OUTSIDE
   #main-content, so it survives every pjax swap and would otherwise follow
   the reader onto every page they open afterwards. The shell owns its
   visibility: it shows only while the location is /support. */
html:not(.on-support) #ys-widget-root,
html:not(.on-support) #ys-widget-host,
html:not(.on-support) #ys-widget-host-dock{display:none !important}

/* ── phones: the shell as an app bar ──────────────────────────────────────
   Below 900px the labels go, so every control in the bar is a square icon
   button at the 44px touch size the touch rule asks for, the bar is tall
   enough to hold them, and the strip reserved under it matches. */
.tb-svg{width:17px;height:17px;display:block}
.tb-mi{display:none}
.tb-ic .tb-svg{width:15px;height:15px}
.ch-ic{display:none}
@media(max-width:900px){
  :root{--topbar-h:60px}
  .topbar{min-height:var(--topbar-h);padding:8px 10px 8px 64px;gap:6px;
    padding-top:max(8px,env(safe-area-inset-top))}
  .sb-burger{top:max(8px,env(safe-area-inset-top));left:10px}
  .topbar .tb-btn,.topbar .sb-status-btn{width:44px;height:44px;min-height:44px;padding:0;
    justify-content:center;border-radius:12px;flex:none}
  .topbar .tb-mi{display:inline-flex}
  .topbar .tb-cv{display:none}
  .topbar .tb-ic .tb-svg{width:18px;height:18px}
  .topbar .tb-acct .sb-av{width:26px;height:26px;font-size:12px}
  /* A sheet under the bar. The menus are anchored from their bottom on the
     desktop; fixed to the viewport that collapsed them to nothing. */
  .topbar .tb-menu{position:fixed !important;top:calc(var(--topbar-h) + 6px) !important;bottom:auto !important;
    right:10px !important;left:10px !important;min-width:0 !important;width:auto !important;
    max-height:calc(100dvh - var(--topbar-h) - 24px);overflow:auto;border-radius:14px}
  .topbar .tb-menu a,.topbar .tb-menu button{min-height:48px}
  .topbar .sb-pop{position:fixed;top:calc(var(--topbar-h) + 6px);left:10px;right:10px;width:auto}
  /* the spacer above reserves the bar; the old 54px pad doubled it */
  .has-sb{padding-top:0 !important}
  .has-sb .wrap,.has-sb .fpage{padding-top:14px}
}
@media(max-width:760px){
  .corner-help{bottom:calc(16px + env(safe-area-inset-bottom));right:14px}
  .corner-help-btn{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .corner-help-btn.is-accent{padding:0}
  .corner-help-btn .ch-ic{display:inline-flex}
  .corner-help-btn .ch-ic .tb-svg{width:20px;height:20px}
  .corner-help-btn .ch-lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:hidden}
}