diff --git a/CHANGELOG.md b/CHANGELOG.md
index 498cd8cbc..72251e421 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   and appended to the `sans` stack, so the swap to the self-hosted webfont no
   longer reflows the page: measured text width moves from about 8% off target
   to under 0.5% while the woff2 is still loading ([#155](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/155)).
+- The contents drawer is rebuilt on the native Popover API. The browser now
+  owns its open/closed state (`popovertarget` on the toolbar toggle), so the
+  drawer works on the server-rendered HTML before hydration, a closed drawer is
+  `display: none` from the UA stylesheet on the very first paint — the
+  critical-CSS rule that parked it off-screen is gone rather than patched —
+  and its links leave the tab order and accessibility tree while closed.
+  **Behaviour changes:** the drawer is now light-dismissed (`popover="auto"`):
+  Escape closes it, and so does clicking or selecting anywhere outside it,
+  where before it stayed open until toggled. It also closes itself when the
+  search dialog opens, since a popover paints above every z-indexed layer
+  including a modal's backdrop. **Browser support:** browsers without the
+  Popover API (Firefox < 125, Safari < 17, which includes anything on iOS 16)
+  get neither the drawer nor its toggle — the in-page outline and site
+  navigation still reach every page there. A polyfill was considered and
+  rejected because it runs after first paint, reintroducing the flash this
+  removes; revisit if that share matters. Drawer widths now live in
+  `styles/app.css` keyed on `theme(screens.*)`, so they no longer depend on
+  Tailwind's emission order
+  ([#130](https://github.com/QuantEcon/quantecon-theme.mystmd/issues/130),
+  [#144](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/144)).
 
 ### Fixed
 - Inline code no longer renders wrapped in literal backticks.
@@ -67,6 +87,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   directory rather than assuming one. A production build now emits **zero**
   absolute asset URLs and all 78 references resolve
   ([#150](https://github.com/QuantEcon/quantecon-theme.mystmd/issues/150)).
+- The contents toggle icons no longer animate their first-paint correction,
+  and the close icon no longer paints beside the hamburger on the pre-`app.css`
+  frame. The icons now swap with `display` off the drawer's `:popover-open`
+  state instead of cross-fading with `transition-all`, so there is nothing to
+  animate, and a zero-specificity critical-CSS rule hides the close icon until
+  the stylesheet lands
+  ([#127](https://github.com/QuantEcon/quantecon-theme.mystmd/issues/127),
+  [#144](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/144)).
+- The toolbar logo no longer distorts between roughly 770px and 840px, and the
+  desktop control set no longer overflows the right edge in the 768–856px band.
+  The logo is `shrink-0` (preflight's `max-width: 100%` was letting it clamp to
+  a shrinking flex item), and the toolbar's gap, separator and padding widen at
+  `lg` rather than `md`, returning about 148px to that band
+  ([#144](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/144)).
+- The contents toggle has a visible `:focus-visible` ring, so keyboard users
+  can see where focus returns after Escape closes the drawer (WCAG 2.4.7)
+  ([#144](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/144)).
 
 ## [2.3.1] - 2026-08-26
 
diff --git a/app/components/ContentsSidebar.tsx b/app/components/ContentsSidebar.tsx
index a22a86815..2366a1ad6 100644
--- a/app/components/ContentsSidebar.tsx
+++ b/app/components/ContentsSidebar.tsx
@@ -3,16 +3,13 @@ import { getProjectHeadings } from '@myst-theme/common';
 import {
   useBaseurl,
   useLinkProvider,
-  useNavOpen,
   useProjectManifest,
   useSiteManifest,
-  useThemeTop,
   withBaseurl,
 } from '@myst-theme/providers';
-import { useSidebarHeight } from '@myst-theme/site';
-import classNames from 'classnames';
 import { slugToUrl } from 'myst-common';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { TOC_HEADING_ID, TOC_POPOVER_ID } from './contentsDrawer';
 
 type StrictHeading = Omit<Heading, 'level'> & { level: number };
 type HeadingGroup = StrictHeading[];
@@ -45,25 +42,43 @@ function Section({ group }: { group: HeadingGroup }) {
 }
 
 /**
- * True only after the component has mounted on the client.
+ * Closes the drawer when a modal dialog opens.
  *
- * Both the server render and the first (hydrating) client render return
- * `false`, so the markup matches and React does not warn; the effect then
- * flips it on the frame after hydration.
+ * A popover lives in the browser's top layer, which paints above every
+ * z-indexed element — including the search dialog's backdrop (`z-[1000]`) and
+ * panel. Light dismiss does not help: it fires on pointerdown, and the search
+ * hotkey (Cmd/Ctrl+K) is a keydown, so the drawer would stay open above the
+ * modal, un-dimmed, with its links dead under the dialog's pointer-events lock.
+ *
+ * Radix portals the dialog into a container appended directly to <body>, so a
+ * shallow childList observer on <body> is enough — no subtree walk on every
+ * mutation. Any `role="dialog"` counts: a modal opening over an open drawer is
+ * wrong regardless of which dialog it is.
  */
-function useMounted() {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  return mounted;
+function useCloseOnDialogOpen(popoverId: string) {
+  useEffect(() => {
+    const drawer = document.getElementById(popoverId);
+    if (!drawer || typeof drawer.hidePopover !== 'function') return;
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (!(node instanceof Element)) continue;
+          if (node.matches('[role="dialog"]') || node.querySelector('[role="dialog"]')) {
+            drawer.hidePopover(); // no-op when already closed
+            return;
+          }
+        }
+      }
+    });
+    observer.observe(document.body, { childList: true });
+    return () => observer.disconnect();
+  }, [popoverId]);
 }
 
 export function ContentsSidebar() {
-  const [open] = useNavOpen();
-  const mounted = useMounted();
+  useCloseOnDialogOpen(TOC_POPOVER_ID);
   const config = useSiteManifest();
   const project = useProjectManifest();
-  const top = useThemeTop();
-  const { toc } = useSidebarHeight(top);
   const baseurl = useBaseurl();
   const Link = useLinkProvider();
 
@@ -96,37 +111,19 @@ export function ContentsSidebar() {
     );
 
   return (
-    <div
-      ref={toc}
-      className={classNames(
-        // Stable hook for the inline critical CSS in app/root.tsx, which parks
-        // this panel off-screen on the very first paint — before app.css lands.
-        'qe-contents-sidebar',
-        'fixed top-0 left-0',
-        'w-[350px] lg:w-[250px] 2xl:w-[350px]',
-        'h-screen w-[250px] z-[20] pt-[40px] pb-[90px] px-9',
-        'bg-qetoolbar-light dark:bg-qetoolbar-dark ',
-        'border-r-[1px] border-qetoolbar-border',
-        'overflow-y-auto',
-        // Belt and braces, not the primary guard. The critical CSS above is
-        // what actually prevents the flash; because both states are a -100%
-        // translate there is nothing for a transition to interpolate, so
-        // removing this gate does not by itself reintroduce it (measured).
-        //
-        // It is kept because the transition is only ever wanted in response to
-        // a click: withholding it until after mount means any correction made
-        // when app.css lands is applied instantly rather than animated, which
-        // keeps this component correct even if the critical rule is later
-        // changed or dropped.
-        //
-        // `transform` (not `all`) so only the slide animates, on the compositor.
-        mounted && 'transition-transform duration-300 ease-in-out',
-        { 'translate-x-0': open, '-translate-x-full': !open }
-      )}
-      style={{ top: '50px' }}
-    >
-      <div className="mb-4 text-lg font-bold text-qetext-light dark:text-qetext-dark">Contents</div>
-      <nav className="text-qetext-light">
+    // A popover: the browser owns the open/closed state, so there is none in
+    // React and the drawer works before hydration. All presentation lives in
+    // `.qe-toc` (styles/app.css).
+    <div id={TOC_POPOVER_ID} popover="auto" className="qe-toc">
+      {/* A styled div, not a heading: the drawer precedes every page's <h1>
+          in DOM order, so an <h2> here would invert heading-order navigation
+          whenever the drawer is open. */}
+      <div id={TOC_HEADING_ID} className="mb-4 text-lg font-bold">
+        Contents
+      </div>
+      {/* Labelled by the title above, not a second `aria-label` — the toggle
+          is already named "Table of contents"; don't repeat it here. */}
+      <nav aria-labelledby={TOC_HEADING_ID}>
         {headings?.map((headingOrGroup) => {
           if (Array.isArray(headingOrGroup))
             return (
diff --git a/app/components/NavigationAndArticleWrapper.tsx b/app/components/NavigationAndArticleWrapper.tsx
index 612c06a29..3fc9f43d5 100644
--- a/app/components/NavigationAndArticleWrapper.tsx
+++ b/app/components/NavigationAndArticleWrapper.tsx
@@ -1,4 +1,3 @@
-import { useSidebarHeight } from '@myst-theme/site';
 import {
   BannerStateProvider,
   TabStateProvider,
@@ -10,21 +9,18 @@ import { ContentsSidebar } from './ContentsSidebar';
 
 function NavigationAndArticleWrapperInternal({
   children,
-  inset = 20, // begin text 20px from the top (aligned with menu)
 }: {
   hide_toc?: boolean;
   hideSearch?: boolean;
   children: React.ReactNode;
-  inset?: number;
 }) {
   const top = useThemeTop();
-  const { container } = useSidebarHeight(top, inset);
   return (
     <>
       <Toolbar />
       <ContentsSidebar />
       <TabStateProvider>
-        <article ref={container} className="article content" style={{ marginTop: top }}>
+        <article className="article content" style={{ marginTop: top }}>
           {children}
         </article>
       </TabStateProvider>
@@ -36,12 +32,10 @@ export function NavigationAndArticleWrapper({
   children,
   hide_toc,
   hideSearch,
-  inset = 20, // begin text 20px from the top (aligned with menu)
 }: {
   hide_toc?: boolean;
   hideSearch?: boolean;
   children: React.ReactNode;
-  inset?: number;
 }) {
   return (
     <UiStateProvider>
@@ -50,7 +44,6 @@ export function NavigationAndArticleWrapper({
           children={children}
           hide_toc={hide_toc}
           hideSearch={hideSearch}
-          inset={inset}
         />
       </BannerStateProvider>
     </UiStateProvider>
diff --git a/app/components/contentsDrawer.ts b/app/components/contentsDrawer.ts
new file mode 100644
index 000000000..edd954a50
--- /dev/null
+++ b/app/components/contentsDrawer.ts
@@ -0,0 +1,12 @@
+/**
+ * Identifiers shared by the contents drawer and the button that opens it.
+ *
+ * `popovertarget` on the button is matched to the panel's `id` by the browser,
+ * so the two must agree. Neither component owns the value: the panel
+ * (ContentsSidebar) and the toggle (toolbar/SidebarToggle) both import it from
+ * here, rather than one importing from the other.
+ */
+export const TOC_POPOVER_ID = 'qe-toc';
+
+/** Labels the drawer's <nav>, so the heading is not announced twice. */
+export const TOC_HEADING_ID = 'qe-toc-heading';
diff --git a/app/components/toolbar/SidebarToggle.tsx b/app/components/toolbar/SidebarToggle.tsx
index 7d342c976..a5d16027a 100644
--- a/app/components/toolbar/SidebarToggle.tsx
+++ b/app/components/toolbar/SidebarToggle.tsx
@@ -1,32 +1,30 @@
-import { useNavOpen } from '@myst-theme/providers';
-import classNames from 'classnames';
 import { Menu, X } from 'lucide-react';
+import { TOC_POPOVER_ID } from '../contentsDrawer';
 
+/**
+ * Opens the contents drawer.
+ *
+ * No `onClick` and no React state by design — `popovertarget` hands the toggle
+ * to the browser, which also supplies Escape, light dismiss and the expanded
+ * state in the accessibility tree. Don't add any of those here — including an
+ * `aria-expanded` attribute: the DOM attribute reads `null` by design, the
+ * browser exposes the state directly to assistive tech.
+ *
+ * Both icons are `aria-hidden` so the button is the single accessible name;
+ * which one shows is decided in CSS from the drawer's `:popover-open` state
+ * (`.qe-toc-toggle__*` in styles/app.css). Browsers without the Popover API
+ * hide this button along with the drawer — see the `@supports` block there.
+ */
 export function SidebarToggle() {
-  const [open, setOpen] = useNavOpen();
   return (
     <button
-      className="relative flex items-center w-6 h-6 cursor-pointer opacity-90"
-      onClick={() => setOpen(!open)}
+      type="button"
+      popovertarget={TOC_POPOVER_ID}
+      aria-label="Table of contents"
+      className="qe-toc-toggle flex items-center w-6 h-6 cursor-pointer opacity-90 transition-transform duration-300 ease-in-out hover:scale-110"
     >
-      <X
-        className={classNames('absolute transition-all duration-300 ease-in-out hover:scale-110', {
-          'opacity-0': !open,
-          'opacity-100': open,
-        })}
-        width={24}
-        height={24}
-        aria-label="Hide table of contents"
-      />
-      <Menu
-        className={classNames('absolute transition-all duration-300 ease-in-out hover:scale-110', {
-          'opacity-100': !open,
-          'opacity-0': open,
-        })}
-        width={24}
-        height={24}
-        aria-label="Show table of contents"
-      />
+      <Menu className="qe-toc-toggle__open" width={24} height={24} aria-hidden="true" />
+      <X className="qe-toc-toggle__close" width={24} height={24} aria-hidden="true" />
     </button>
   );
 }
diff --git a/app/components/toolbar/Toolbar.tsx b/app/components/toolbar/Toolbar.tsx
index 7dcdc3a59..7debe227e 100644
--- a/app/components/toolbar/Toolbar.tsx
+++ b/app/components/toolbar/Toolbar.tsx
@@ -21,12 +21,18 @@ export function Toolbar() {
   return (
     <div
       className={classNames(
-        'fixed top-0 left-0 right-0 z-[2] flex items-center justify-between h-[50px] px-3 md:px-6',
+        'fixed top-0 left-0 right-0 z-[2] flex items-center justify-between h-[50px] px-3 lg:px-6',
         'bg-qetoolbar-light dark:bg-qetoolbar-dark',
         'border-b-[1px] border-qetoolbar-border'
       )}
     >
-      <ul className="flex items-center w-full space-x-3 md:space-x-5 text-qetext-light dark:text-qetext-dark">
+      {/*
+        Gap and container padding widen at `lg`, not `md`. The full desktop
+        control set switches on at `md`, and at 20px spacing it does not fit
+        between 768px and ~856px — the last icons get pushed off the right
+        edge. Keep the tighter spacing for that band when adding controls here.
+      */}
+      <ul className="flex items-center w-full space-x-3 lg:space-x-5 text-qetext-light dark:text-qetext-dark">
         <li>
           <SidebarToggle />
         </li>
@@ -37,7 +43,13 @@ export function Toolbar() {
             </Tooltip>
           </Link>
         </li>
-        <li>
+        {/*
+          `shrink-0` is load-bearing: the logo has a pinned height and an auto
+          width, and preflight's `max-width: 100%` lets it clamp to a shrinking
+          flex item, distorting the aspect ratio. The row's flexible space is
+          the spacer below, not this.
+        */}
+        <li className="shrink-0">
           <QuantEconButton />
         </li>
         <li className="flex-grow" />
@@ -48,7 +60,9 @@ export function Toolbar() {
           <FullScreenButton size={iconSize} />
         </li>
         <FontScaleListItems className="hidden md:block" size={iconSize} />
-        <li className="flex items-center md:pr-[36px]">
+        {/* Separator between the view controls and the actions cluster; scaled
+            down in the narrow desktop band for the same reason as the gap. */}
+        <li className="flex items-center md:pr-4 lg:pr-[36px]">
           <ThemeButton className="w-5 h-5 opacity-60" />
         </li>
         <li className="hidden md:block">
diff --git a/app/popover.d.ts b/app/popover.d.ts
new file mode 100644
index 000000000..3b7065e0c
--- /dev/null
+++ b/app/popover.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Popover API attribute typings.
+ *
+ * React 18's JSX types predate the Popover API, though react-dom does render
+ * these attributes (it passes through unknown lowercase ones).
+ *
+ * Delete this file on the move to React 19, which types them natively.
+ */
+import 'react';
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    popover?: 'auto' | 'manual';
+  }
+
+  interface ButtonHTMLAttributes<T> {
+    popovertarget?: string;
+    popovertargetaction?: 'toggle' | 'show' | 'hide';
+  }
+}
diff --git a/app/root.tsx b/app/root.tsx
index 5eeb99b9d..fa43d3281 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -58,8 +58,8 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  *
  * Because these rules carry no specificity, every property set here MUST also
  * be declared by the real stylesheet, otherwise it can never be overridden.
- * (E.g. parking the nav panel off-screen with `visibility:hidden` would stick
- * forever, since no Tailwind class sets `visibility` — hence the transform.)
+ * (Setting `visibility:hidden` on something no Tailwind class un-hides, say,
+ * would stick forever.)
  *
  * Keep the values in sync with their sources of truth:
  *   - font stack:    tailwind.config.js  -> theme.extend.fontFamily.sans
@@ -85,15 +85,16 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  *                    page background; the inner content panel uses `qepage-dark`
  *                    #222, see app/components/Page.tsx — intentionally not set here
  *                    since these rules target <body>.)
- *   - nav panel:     app/components/ContentsSidebar.tsx -> `.qe-contents-sidebar`
- *                    (only the class name needs to stay in sync; see below)
  *
- * The nav-panel rule deliberately sets no width. `translateX(-100%)` resolves
- * against the element's own border box, so its right edge lands at `left + W -
- * W` = 0 for **any** width W — it is off-screen before app.css arrives and
- * stays off-screen after, even though the resolved width differs between the
- * two (350/250/350 across the base/lg/2xl bands). `position:fixed` is set so
- * the panel does not push the article down while it waits.
+ *   - toggle icon:   styles/app.css -> `.qe-toc-toggle__close` (only the class
+ *                    name needs to stay in sync)
+ *
+ * The contents drawer itself needs no rule here — as a popover the UA
+ * stylesheet already hides it while closed (see `.qe-toc` in styles/app.css).
+ * Its toggle does: both icons are always in the DOM and lucide emits real
+ * width/height attributes, so without this rule the close icon paints beside
+ * the hamburger on that first frame. The `body:has(.qe-toc:popover-open)` rule
+ * in app.css outranks this zero-specificity one, so the open state still swaps.
  */
 const CRITICAL_CSS = `
 @font-face{font-family:"Source Sans 3 Fallback";src:local("Helvetica"),local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:92.25%;ascent-override:111%;descent-override:43.36%;line-gap-override:0%}
@@ -102,10 +103,10 @@ const CRITICAL_CSS = `
 :where(body){margin:0;background-color:#fff}
 :where(.dark body){background-color:#1c1917}
 :where([hidden],.hidden){display:none}
+:where(.qe-toc-toggle__close){display:none}
 :where(.simple-center-grid){display:grid;grid-template-columns:[screen-start] 1fr [body-start] minmax(300px,800px) [body-end] 1fr [screen-end]}
 :where(.simple-center-grid) > *{grid-column:body-start / body-end}
 @media (min-width:1280px){:where(.simple-center-grid){grid-template-columns:[screen-start] 1fr 200px 20px [body-start] 800px [body-end] 20px [margin-start] 200px [margin-end] 1fr [screen-end]}}
-:where(.qe-contents-sidebar){position:fixed;left:0;transform:translateX(-100%)}
 `;
 
 export const links: LinksFunction = () => {
diff --git a/styles/app.css b/styles/app.css
index 645a3108c..d4368e8c9 100644
--- a/styles/app.css
+++ b/styles/app.css
@@ -57,3 +57,134 @@
     @apply underline;
   }
 }
+
+/**
+ * Contents drawer.
+ *
+ * The panel is a popover, so the UA stylesheet gives it `display: none` while
+ * closed: hidden on the first paint before any author CSS loads, and its links
+ * kept out of the tab order and accessibility tree, both for free.
+ *
+ * `display` and `overlay` are transitioned with `allow-discrete` so the panel
+ * can still slide despite going to `display: none`; `@starting-style` gives the
+ * entry animation its starting point. Keep all three together — drop one and
+ * the slide breaks in one direction.
+ *
+ * Widths and padding are in rem, so the toolbar's A+/A- control (which sets
+ * the root font size) scales the drawer with the text it holds — intended.
+ * The 50px block-start below is px on purpose: the toolbar it sits under is.
+ *
+ * Widths live here rather than in utility classes so they don't depend on
+ * Tailwind's emission order (#130). The 50px block-start must match the
+ * `top={50}` passed to <Document> in app/root.tsx.
+ */
+@layer components {
+  .qe-toc {
+    position: fixed;
+    inset-block: 50px 0;
+    inset-inline-start: 0;
+    z-index: 20;
+    width: 21.875rem;
+    /* The UA stylesheet sizes popovers `fit-content` in both axes. Width is set
+       explicitly above; height has to be reset to `auto` or `fit-content` wins
+       and the panel stops at its content instead of stretching to inset-block. */
+    height: auto;
+    margin: 0;
+    padding: 2.5rem 2.25rem 5.625rem;
+    border: 0;
+    border-inline-end: 1px solid theme(colors.qetoolbar-border);
+    background-color: theme(colors.qetoolbar-light);
+    color: theme(colors.qetext-light);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    translate: -100% 0;
+    transition:
+      translate 0.3s ease-in-out,
+      display 0.3s allow-discrete,
+      overlay 0.3s allow-discrete;
+  }
+
+  /* Breakpoints via theme() so they track `screens` in tailwind.config.js —
+     transcribing the pixel values here would desync silently. */
+  @media (min-width: theme(screens.lg)) {
+    .qe-toc {
+      width: 15.625rem;
+    }
+  }
+
+  @media (min-width: theme(screens.2xl)) {
+    .qe-toc {
+      width: 21.875rem;
+    }
+  }
+
+  .dark .qe-toc {
+    background-color: theme(colors.qetoolbar-dark);
+    color: theme(colors.qetext-dark);
+  }
+
+  .qe-toc:popover-open {
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .qe-toc:popover-open {
+      translate: -100% 0;
+    }
+  }
+
+  /* Opens and closes instantly. Dropping the transition is safe: the
+     `display`/`overlay` entries only exist to let the slide outlast
+     `display: none`, and there is no slide under this preference. */
+  @media (prefers-reduced-motion: reduce) {
+    .qe-toc {
+      transition: none;
+    }
+  }
+
+  /* Escape closes the drawer and returns focus here, which matches
+     `:focus-visible`. Restyle it, never remove it — that would leave keyboard
+     users on an unmarked control (WCAG 2.4.7). Pointer users never see it. */
+  .qe-toc-toggle:focus-visible {
+    outline: 2px solid theme(colors.qeborder-blue);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+
+  /* Toggle icon: hamburger when closed, cross when open, driven off the
+     drawer's own state so the two cannot desync. Swap with `display`, not
+     opacity — a transitioned swap animates itself on the first paint (#127). */
+  .qe-toc-toggle__close {
+    display: none;
+  }
+
+  body:has(.qe-toc:popover-open) .qe-toc-toggle__open {
+    display: none;
+  }
+
+  body:has(.qe-toc:popover-open) .qe-toc-toggle__close {
+    display: block;
+  }
+
+  /**
+   * Browsers without the Popover API (Firefox < 125, Safari < 17 — including
+   * anything stuck on iOS 16). The attribute is inert there, so the panel would
+   * render permanently open; hide it, and hide the toggle with it rather than
+   * leave a named control that cannot do anything.
+   *
+   * Deliberate trade: those browsers get no drawer, but the in-page outline and
+   * site navigation still reach every page. A polyfill would restore it and is
+   * not a drop-in — `:popover-open` is a pseudo-class and cannot be
+   * polyfilled, so every rule above needs a class-based stand-in, and the
+   * polyfill only runs after first paint. Revisit if that share grows.
+   *
+   * Firefox 125-128 has popover but not `@starting-style`: opens without
+   * sliding, which is fine.
+   */
+  @supports not selector(:popover-open) {
+    .qe-toc,
+    .qe-toc-toggle {
+      display: none;
+    }
+  }
+}
diff --git a/tests/visual/fouc.spec.ts b/tests/visual/fouc.spec.ts
index e999da775..195c5a87b 100644
--- a/tests/visual/fouc.spec.ts
+++ b/tests/visual/fouc.spec.ts
@@ -9,10 +9,9 @@ import { test, expect, type Page, type Route } from "@playwright/test";
  * grid collapsed to `display: block`. The fix inlines critical CSS into `<head>`
  * (see `app/root.tsx`), which parses synchronously and styles that first paint.
  *
- * The same unstyled frame also exposed the contents sidebar: `-translate-x-full`
- * does nothing until app.css lands, so the panel painted in-flow and visible,
- * then slid shut once the stylesheet arrived — the "menu opens on load" report.
- * It is covered here too, since the cause and the guard are the same.
+ * The contents drawer is checked here too: any panel that relies on author CSS
+ * to stay hidden paints open in that same frame. It is a popover now, so the UA
+ * stylesheet hides it and the assertions below expect that.
  *
  * This test makes the failure mode deterministic by **aborting all external
  * stylesheets**, so the only styling that can reach the page is the inline
@@ -26,22 +25,6 @@ import { test, expect, type Page, type Route } from "@playwright/test";
 
 const PAGE = "/";
 
-/**
- * Slack, in CSS px, allowed on the parked nav panel's right edge.
- *
- * `translateX(-100%)` puts that edge at exactly 0 in theory, but the panel is
- * unstyled at this point, so its width is shrink-to-fit and lands on a
- * fractional value (135.171875px in WebKit here). WebKit snaps the painted
- * translate to a whole device pixel while leaving the border-box width
- * fractional, so the measured edge comes back at +0.171875 rather than 0 — the
- * exact remainder varies with the intrinsic width, hence with platform font
- * metrics. A strict `> 0` test therefore passes on the ubuntu CI runner and
- * fails on macOS for the same, correct, markup.
- *
- * 1px is well inside "not visible" and well outside any snapping remainder.
- */
-const OFFSCREEN_EPS = 1;
-
 async function isolateInlineCss(page: Page, { stripCritical = false } = {}) {
   await page.route("**/*", async (route: Route) => {
     const req = route.request();
@@ -70,7 +53,8 @@ async function firstPaintState(page: Page) {
   await page.waitForSelector(".simple-center-grid", { timeout: 5000 }).catch(() => {});
   return page.evaluate(() => {
     const grid = document.querySelector(".simple-center-grid");
-    const sidebar = document.querySelector(".qe-contents-sidebar");
+    const sidebar = document.querySelector(".qe-toc");
+    const closeIcon = document.querySelector(".qe-toc-toggle__close");
     const applied = Array.from(document.styleSheets).filter((sheet) => {
       try {
         return !!sheet.cssRules && sheet.cssRules.length > 0; // applied, not pending
@@ -81,18 +65,17 @@ async function firstPaintState(page: Page) {
     return {
       gridDisplay: grid ? getComputedStyle(grid).display : "(absent)",
       bodyFont: getComputedStyle(document.body).fontFamily,
-      // The nav panel is closed on load, so it must start parked off-screen to
-      // the left: its right edge at (or left of) the viewport's left edge. If
-      // any real width of it is on-screen here, the menu visibly flashes open.
+      // A closed popover is `display: none` per the UA stylesheet, so it paints
+      // nothing even with no author CSS at all — hence both tests below expect
+      // it hidden.
       //
-      // Reported as the measured edge rather than a boolean so the assertions
-      // can carry a sub-pixel tolerance — see `OFFSCREEN_EPS` below.
-      //
-      // `null` when the element is missing, and the guards below reject it
-      // explicitly: `null` numerically coerces to 0, which would *pass* the
-      // off-screen check, so a renamed hook would slip through the main test
-      // and surface as a confusing failure in the control instead.
-      sidebarRight: sidebar ? sidebar.getBoundingClientRect().right : null,
+      // `null` when the element is missing, so a renamed hook fails the
+      // explicit presence guard instead of silently satisfying "not rendered".
+      sidebarRendered: sidebar ? sidebar.getClientRects().length > 0 : null,
+      // The toggle's close icon is hidden by a critical-CSS rule; without it
+      // both icons paint side by side on the first frame. `null` when missing,
+      // for the same reason as above.
+      toggleCloseRendered: closeIcon ? closeIcon.getClientRects().length > 0 : null,
       // null href == an inline <style>; any string == an external sheet that applied
       appliedExternal: applied.some((sheet) => !!sheet.href),
     };
@@ -117,11 +100,15 @@ test.describe("FOUC guard (WebKit) — inline critical CSS styles the first pain
     // not about the webfont having arrived.
     expect(state.bodyFont).toMatch(/^["']?Source Sans 3 Variable["']?\s*,/);
     expect(
-      state.sidebarRight,
-      "`.qe-contents-sidebar` not found — the hook the critical CSS targets was renamed or removed"
+      state.sidebarRendered,
+      "`.qe-toc` not found — the contents drawer was renamed or removed"
+    ).not.toBeNull();
+    expect(state.sidebarRendered).toBe(false); // closed popover paints nothing
+    expect(
+      state.toggleCloseRendered,
+      "`.qe-toc-toggle__close` not found — the toggle's close icon was renamed or removed"
     ).not.toBeNull();
-    // Nav panel parked off-screen (right edge at 0, modulo the sub-pixel slack).
-    expect(state.sidebarRight).toBeLessThan(OFFSCREEN_EPS);
+    expect(state.toggleCloseRendered).toBe(false); // hidden by the inline rule
   });
 
   test("control: removing the inline critical CSS reproduces the FOUC", async ({ page }) => {
@@ -133,14 +120,19 @@ test.describe("FOUC guard (WebKit) — inline critical CSS styles the first pain
     expect(state.appliedExternal).toBe(false);
     expect(state.gridDisplay).toBe("block");
     expect(state.bodyFont).not.toMatch(/Source Sans 3/);
-    // Without the inline rule the nav panel lays out in-flow and fully visible —
-    // this is the "menu flashes open on load" symptom. Measured at ~1272px of a
-    // 1280px viewport, so the margin over OFFSCREEN_EPS is three orders of
-    // magnitude: the two states are never in danger of being confused.
+    // Hidden even with every stylesheet stripped — that is the UA stylesheet's
+    // doing, not ours, so this control expects it hidden rather than flashing.
+    expect(
+      state.sidebarRendered,
+      "`.qe-toc` not found — the contents drawer was renamed or removed"
+    ).not.toBeNull();
+    expect(state.sidebarRendered).toBe(false);
+    // Unlike the drawer, the close icon relies on the critical CSS: with it
+    // stripped, both icons paint — which proves the inline rule is doing work.
     expect(
-      state.sidebarRight,
-      "`.qe-contents-sidebar` not found — the hook the critical CSS targets was renamed or removed"
+      state.toggleCloseRendered,
+      "`.qe-toc-toggle__close` not found — the toggle's close icon was renamed or removed"
     ).not.toBeNull();
-    expect(state.sidebarRight).toBeGreaterThan(OFFSCREEN_EPS);
+    expect(state.toggleCloseRendered).toBe(true);
   });
 });
diff --git a/tests/visual/theme.spec.ts b/tests/visual/theme.spec.ts
index 6f0143a36..f02ea7324 100644
--- a/tests/visual/theme.spec.ts
+++ b/tests/visual/theme.spec.ts
@@ -199,8 +199,10 @@ test.describe("QuantEcon theme — visual regression", () => {
   test("sidebar-open", async ({ page }) => {
     await page.goto("/", { waitUntil: "domcontentloaded" });
     await settle(page);
-    await page.locator('button:has([aria-label="Show table of contents"])').click();
-    // The open state is a 300ms translate transition; wait for the sidebar to
+    // The icons are aria-hidden, so the button itself carries the only
+    // accessible name to target.
+    await page.getByRole("button", { name: "Table of contents" }).click();
+    // The open state is a 300ms translate transition; wait for the drawer to
     // be fully on-screen (its "Contents" heading at ratio 1) rather than a
     // fixed delay.
     await expect(page.getByText("Contents", { exact: true })).toBeInViewport({ ratio: 1 });
@@ -210,6 +212,52 @@ test.describe("QuantEcon theme — visual regression", () => {
     });
   });
 
+  // Guards the reason the drawer is a popover: the browser owns the toggle, so
+  // it works on the server-rendered HTML without hydration. Every other test
+  // runs with JS on and would pass without that property, so this is the only
+  // thing stopping an onClick or a client-only wrapper from silently taking it.
+  test.describe("without JavaScript", () => {
+    // The ordinary `page` fixture, with JS off — no hand-built context, so the
+    // project's own baseURL applies rather than a positional lookup.
+    test.use({ javaScriptEnabled: false });
+
+    test("drawer-opens-without-javascript", async ({ page }, testInfo) => {
+      test.skip(
+        testInfo.project.name !== "desktop-chrome",
+        "asserts a server-render property; one engine is enough"
+      );
+      await page.goto("/", { waitUntil: "domcontentloaded" });
+      const drawer = page.locator(".qe-toc");
+      // Presence first: `toBeHidden` also passes on zero matches, so without
+      // this a renamed or missing drawer would read as "correctly closed".
+      await expect(drawer).toHaveCount(1);
+      await expect(drawer).toBeHidden();
+      await page.getByRole("button", { name: "Table of contents" }).click();
+      await expect(drawer).toBeVisible();
+      await expect(page.getByText("Contents", { exact: true })).toBeInViewport({ ratio: 1 });
+    });
+  });
+
+  // A popover paints in the top layer, above the search dialog's backdrop and
+  // panel. Light dismiss cannot cover the keyboard route to search, so the
+  // drawer closes itself when a modal dialog mounts (see ContentsSidebar.tsx).
+  test("drawer-closes-when-search-opens", async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "desktop-chrome",
+      "keyboard-shortcut behaviour; one engine is enough"
+    );
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await settle(page);
+    const drawer = page.locator(".qe-toc");
+    await page.getByRole("button", { name: "Table of contents" }).click();
+    await expect(drawer).toBeVisible();
+    // Upstream binds Ctrl+K (Cmd+K only when it detects a Mac UA; the Desktop
+    // Chrome device profile is not one).
+    await page.keyboard.press("Control+k");
+    await expect(page.getByRole("dialog")).toBeVisible();
+    await expect(drawer).toBeHidden();
+  });
+
   // Launch popover: Colab is the default and primary target (BinderHub is
   // deliberately not offered — #26). window.open is stubbed so the launch URL
   // assertion is deterministic and offline; the URL's repo part comes from the
@@ -282,8 +330,9 @@ test.describe("QuantEcon theme — visual regression", () => {
     await page.goto(`${noThebeBase}/notebook`, { waitUntil: "domcontentloaded" });
     await settle(page);
     // Sanity-check we actually loaded the notebook page (so the count-0 below
-    // isn't a false pass from a 404 / wrong page).
-    await expect(page.getByText("Notebook outputs").first()).toBeVisible();
+    // isn't a false pass from a 404 / wrong page). Match the heading, not bare
+    // text — the drawer links to this page by the same name.
+    await expect(page.getByRole("heading", { name: "Notebook outputs" })).toBeVisible();
     await expect(page.getByRole("button", { name: /start compute/i })).toHaveCount(0);
   });
 });