@import url("./workshop.css");
/* One compact row. The same section nav moves into Menu when it cannot fit. */
body .topbar{display:flex;align-items:center;min-height:64px;flex-wrap:nowrap;gap:32px;padding:8px 24px}
.topbar .wordmark{flex:none}
.topbar .yey-brand{font-size:28px!important;gap:10px}
.topbar .yey-brand>img{width:44px;height:44px;flex-basis:44px}
.topbar>.workspace-sections{display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:4px;width:max-content;min-width:max-content;overflow:visible;margin:0 auto;padding:0;order:0}
.topbar .workspace-sections a{flex:none;min-height:44px;padding:9px 12px;box-shadow:none;border:0;border-bottom:3px solid transparent;border-radius:4px;background:none;color:var(--ink);font-size:14px;white-space:nowrap}
.topbar .workspace-sections a[aria-current=page]{background:var(--panel);border-bottom-color:var(--blue);font-weight:750}
.topbar .workspace-sections a:hover{background:var(--paper2)}
.topbar .site-menu-toggle{display:inline-flex;gap:10px;margin-left:auto;min-height:44px;width:118px;flex:none;white-space:nowrap;font-size:14px}
.topbar:not(.navigation-collapsed)>.site-menu-toggle{margin-left:0}
/* The inline My desk destination already provides this shortcut. */
body:has(.topbar>.workspace-sections) main :is(.collection-back,.calendar-page>.text-action,.workshop-heading>.text-action,.legal-paper>a[href="#desk"]){display:none}
.menu-icon{display:grid;gap:4px;width:17px;flex-shrink:0}
.menu-icon i{display:block;height:2px;background:currentColor;border-radius:1px}
.topbar #workspace-nav{position:absolute;display:block;right:24px;top:100%;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - var(--topbar-height,64px) - 16px);overflow:auto;overscroll-behavior:contain;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:5px;box-shadow:0 12px 30px #0004;z-index:12}
.topbar #workspace-nav[hidden]{display:none!important}
.topbar #workspace-nav .workspace-sections,.menu-information{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;margin:0;padding:0;min-width:0}
.topbar #workspace-nav a,.topbar #workspace-nav .menu-information button{display:flex;align-items:center;min-height:44px;padding:8px 12px;white-space:normal;overflow-wrap:anywhere;font-size:14px;text-align:left;border:1px solid transparent;border-radius:4px}
.topbar #workspace-nav .workspace-sections a[aria-current=page]{border-bottom:3px solid var(--blue)}
.topbar #workspace-nav .menu-information button{background:none;color:var(--ink);font-weight:650}
.topbar #workspace-nav .menu-information button:hover{background:#8882}
.menu-appearance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0;padding:12px 0;border-block:1px solid var(--line);font-size:14px;font-weight:650}
.menu-appearance .theme-switch{flex-shrink:0;width:132px}
.menu-information>.eyebrow{grid-column:1/-1;padding:0 12px 6px;font-size:12px}
.topbar #workspace-nav .menu-appearance a{padding:8px 12px;min-height:44px;font-weight:650;text-decoration:underline;text-underline-offset:3px}
/* Measure natural link widths even while their disclosure is closed. */
.topbar.measuring-navigation>.workspace-sections{position:absolute;visibility:hidden;pointer-events:none;width:max-content;min-width:max-content}
@media(max-width:767px){body .topbar{padding:8px 16px;gap:12px}.topbar #workspace-nav{right:12px;width:min(390px,calc(100vw - 24px));padding:14px}}
@media(max-width:359px){body .topbar{padding-inline:12px;gap:10px}.topbar .site-menu-toggle{width:96px}.menu-appearance{gap:12px}}