.hub-navigation{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--paper,#fffaf3);border-bottom:1px solid var(--line,#ded0bb);box-shadow:0 3px 10px #392b240a}
.hub-navigation button,.hub-dialog-navigation button{min-height:44px;padding:8px 18px;font-size:14px;white-space:nowrap}
.hub-navigation button:disabled{opacity:.45;cursor:default}
.hub-navigation button:focus-visible,.hub-dialog-navigation button:focus-visible{outline:3px solid var(--gold,#aa8550);outline-offset:3px}
.hub-navigation span{margin-left:auto;color:var(--muted,#756657);font-size:12px}
.hub-dialog-navigation{display:flex;gap:10px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line,#ded0bb)}
#main:focus{outline:none}
@media(max-width:580px){.hub-navigation{padding:8px 16px}.hub-navigation span{display:none}.hub-navigation button{flex:1}.hub-dialog-navigation button{flex:1}}
@media print{.hub-navigation,.hub-dialog-navigation{display:none}}

/* The drawer and shade cover all page controls on mobile. Desktop stacking is unchanged. */
#closeHubMenu{display:none}
@media(max-width:850px){
  #sidebar{z-index:10004;width:min(300px,88vw);padding:12px 18px 16px!important;overflow:hidden}
  #shade{z-index:10003}
  body.hub-menu-open{overflow:hidden}
  #closeHubMenu{display:flex;align-items:center;justify-content:space-between;gap:16px;align-self:stretch;flex-shrink:0;min-height:44px;margin:0 0 12px;padding:6px 10px;font-size:14px;background:transparent;border:1px solid var(--line)}
  #closeHubMenu span{font:28px/1 Arial,sans-serif}
  #sidebar .brand{font-size:24px;line-height:1.1;padding:0 10px 14px;flex-shrink:0}
  #sidebar .brand small{font-size:9px;letter-spacing:1.5px;margin-top:9px}
  #sidebar .workspace{padding:10px;margin:0 0 12px;flex-shrink:0}
  #sidebar .workspace strong{font-size:17px}
  #sidebar .monogram{width:38px;height:38px;flex-shrink:0;font-size:13px}
  #sidebar #nav{min-height:0;overscroll-behavior:contain}
  #sidebar #nav button{min-height:44px;padding:10px;font-size:16px}
  #sidebar .sidebar-bottom{padding-top:10px;flex-shrink:0}
  #sidebar .sidebar-bottom p{display:none}
  #sidebar .sidebar-bottom button{min-height:44px;font-size:15px}
}
/* Larger, higher-contrast account controls on desktop. */
@media(min-width:701px){
  #cloudStatus{padding:12px 18px;gap:14px;color:#392b24}
  #cloudStatus>.footer-save-status{font-size:17px;line-height:1.4}
  #footerFocusStatus{font-size:17px}
  #focusFooter{padding:8px 12px;gap:10px;flex-wrap:wrap;justify-content:center}
  #cloudStatus button,#focusFooter button{font-size:17px;line-height:1.3;min-height:44px;padding:9px 12px}
}
@media(max-width:700px){
  #cloudStatus{grid-template-columns:auto 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));max-height:35dvh}
  #cloudStatus>.footer-save-status{display:none}
  #focusFooter{grid-column:1;grid-row:1;padding:0;gap:0;justify-self:start}
  #focusFooter #footerFocusStatus,#focusFooter [data-focus-popup]{display:none}
  #focusFooter [data-focus-start]{border:0;padding:10px 12px;min-height:44px;font-size:14px}
  #cloudStatus .footer-account-actions{grid-column:2;grid-row:1;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  #cloudStatus .footer-account-actions button{font-size:14px;min-height:44px;padding:9px 11px}
  /* Keep save failures visible even though the routine saved message is hidden. */
  #cloudStatus.hub-save-warning>.footer-save-status{display:block;grid-column:1/-1;grid-row:2;font-size:14px;color:#842f22}
}