/* Mobile layer — chrome. Loaded AFTER site.css so these rules override the desktop design. Everything here lives behind a mobile media query; desktop is never affected. Use design tokens only (no hardcoded values). Owned by one zone so parallel work never collides: do not put chrome rules in any other mobile file. */ @media (max-width: 768px) { /* ----- Header bar -------------------------------------------------------- One 64px row: brand left, controls right. The desktop nav (which wrapped onto three rows down here) is replaced by the hamburger in MobileNav. */ .site-header__inner { flex-wrap: nowrap; gap: var(--space-3); min-height: var(--space-16); padding-block: var(--space-2); } /* min-width: 0 lets the brand shrink instead of pushing the controls out of the viewport (no horizontal overflow, ever). */ .site-header__brand { min-width: 0; } .site-header__brand .brand { font-size: var(--text-lg); } .site-header__brand .actual-text, .site-header__brand .hover-text { white-space: nowrap; } /* The desktop nav row is hidden below the breakpoint; its links and auth controls live in the mobile panel instead. */ .site-header .nav { display: none; } /* ----- Mobile nav: the bar controls -------------------------------------- MobileNav's root ships with the `hidden` attribute, so it is display:none above this breakpoint without a desktop rule of our own. This re-displays it, which keeps the whole desktop/mobile split inside the media query. */ .mnav[hidden] { display: flex; align-items: center; gap: var(--space-2); flex: none; } /* Hamburger. 48px square: past the 44px touch-target floor, and the same height as the account circle beside it. */ .mnav__toggle { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--space-12); height: var(--space-12); min-height: var(--space-12); flex: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-subtle); color: var(--color-text-secondary); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: var(--transition-base); } .mnav__toggle:hover, .mnav__toggle[aria-expanded="true"] { color: var(--color-text-primary); } /* Exactly one focus indicator: the native outline is replaced, not doubled. */ .mnav__toggle:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* The account circle (signed in) shares the row with the hamburger, so it matches its height and pill radius exactly. */ .mnav .acct__circle { box-sizing: border-box; width: var(--space-12); height: var(--space-12); min-height: var(--space-12); border-radius: var(--radius-pill); -webkit-user-select: none; user-select: none; } .mnav .acct__menu { top: calc(100% + var(--space-3)); } .mnav .acct__item { display: flex; align-items: center; min-height: var(--space-12); } /* ----- Mobile nav: the slide-down panel ---------------------------------- Both layers are portalled to , so they position against the viewport. The panel hangs off the bottom edge of the 64px bar; the overlay dims everything below it and closes the menu on tap. */ .mnav__overlay { position: fixed; inset: var(--space-16) 0 0 0; z-index: var(--z-overlay); background: color-mix(in srgb, var(--color-text-primary) 45%, transparent); animation: mnav-fade-in var(--duration-base) var(--ease-out) both; } /* While the menu is open the header must read as the SAME surface as the panel. It is normally translucent (88% chrome) with a backdrop blur, so the cream page tints through it and it lands a shade off the panel's solid chrome; its border-bottom then draws a seam between the two. Go solid and drop the rule for the duration, so bar + panel are one continuous sheet. */ .site-header:has(.mnav__toggle[aria-expanded="true"]) { background: var(--color-bg-chrome); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } .mnav__panel { position: fixed; top: var(--space-16); left: 0; right: 0; /* Fill the rest of the screen: a full-page menu, not a dropped shelf. */ bottom: 0; z-index: var(--z-modal); display: flex; flex-direction: column; gap: var(--space-6); /* Scrolls when a long panel meets a short phone, and never shows a bar. */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; /* Same gutter as .container, so the panel lines up with the bar above it. */ padding: var(--space-5) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg-chrome); animation: mnav-drop-in var(--duration-base) var(--ease-out) both; } .mnav__panel::-webkit-scrollbar { width: 0; height: 0; } /* The panel takes focus on open (tabindex=-1) so no LINK gets a ring; the panel itself must not paint one either. Focus is still trapped inside it. */ .mnav__panel:focus, .mnav__panel:focus-visible { outline: none; } .mnav__links { display: flex; flex-direction: column; } /* Sign out is a