/* Keep the workspace header usable when the sidebar leaves little horizontal room. */
@media (max-width: 1100px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 64px;
    gap: 10px;
    padding-block: 12px;
  }
  .topbar .breadcrumb {
    min-width: 0;
    margin: 0;
    line-height: 1.5;
  }
  .topbar .breadcrumb strong { min-width: 0; overflow-wrap: anywhere; }
  .topbar .top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    width: 100%;
    gap: 8px;
  }
  .topbar #authLink { margin-left: auto; }
}

@media (max-width: 720px) {
  .topbar, .guest-mode .topbar {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 10px 14px 12px;
  }
  .topbar .mobile-menu {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
  }
  .topbar .breadcrumb { grid-column: 2; grid-row: 1; }
  .topbar .breadcrumb > span { display: none; }
  .guest-mode .topbar .breadcrumb { grid-column: 1 / -1; }
  .topbar .top-actions { grid-column: 1 / -1; gap: 6px; }
  .topbar .icon-button, .topbar .avatar-small {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  :root .topbar #authLink {
    flex: 1 1 80px;
    min-width: 0;
    max-width: 240px;
    height: auto;
    min-height: 44px;
    padding: 8px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .topbar .today-date { display: none; }
  .topbar button:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
  }
}
/* Narrow viewports use one header row; language/theme live in the menu. */
#headerPreferences{display:flex;align-items:center;gap:8px}.mobile-preferences,.mobile-menu-heading,#menuBackdrop{display:none}
@media(max-width:720px){
 .topbar,.guest-mode .topbar{display:flex;flex-wrap:nowrap;align-items:center;min-height:62px;height:62px;gap:7px;padding:8px 10px}
 .topbar .mobile-menu{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px}
 .topbar .breadcrumb{flex:1 1 auto;min-width:0;margin:0!important;font-size:11px;line-height:1.3;overflow:hidden}
 .topbar .breadcrumb strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
 .topbar .top-actions{display:flex;flex:0 0 auto;flex-wrap:nowrap;width:auto;gap:5px}
 .topbar .icon-button,.topbar .avatar-small{flex:0 0 44px;width:44px;height:44px}
 :root .topbar #authLink{flex:0 0 auto;width:auto;min-width:0;max-width:95px;height:44px;min-height:44px;padding:6px 8px;font-size:10px;line-height:1.2;white-space:normal;box-shadow:2px 2px 0 var(--line)}
 #headerPreferences{display:none}.mobile-preferences{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:18px;padding:16px 4px}
 .mobile-preferences>p{flex-basis:100%;margin:0;font-weight:600}.mobile-preferences .icon-button{width:44px;height:44px;margin:0}
 .mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
 #menuClose{width:44px;height:44px;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:24px}
 #menuBackdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:2;background:rgb(14 17 23 / .45);border:0;padding:0}
 .sidebar{max-width:calc(100vw - 46px);overflow-y:auto;overscroll-behavior:contain}.sidebar.open{z-index:4}
 body.mobile-drawer-open{overflow:hidden}
 .guest-mode .topbar .mobile-menu{display:grid}.guest-mode .sidebar.open{display:flex}.guest-mode .sidebar .nav-list,.guest-mode .sidebar .side-label,.guest-mode .sidebar .side-divider,.guest-mode .sidebar .profile-card,.guest-mode .sidebar .sidebar-foot{display:none}
}
@media(max-width:350px){.topbar,.guest-mode .topbar{gap:4px;padding-inline:7px}.topbar .top-actions{gap:4px}:root .topbar #authLink{max-width:70px;padding-inline:5px;font-size:9px}}