/* Use the visible viewport and the real header height, including zoom and safe areas. */
.main-menu {
  --menu-fallback-space:calc(100vh - 72px);
  --menu-safe-left:env(safe-area-inset-left, 0px);
  --menu-safe-right:env(safe-area-inset-right, 0px);
  --menu-safe-top:env(safe-area-inset-top, 0px);
  top:var(--menu-position-top, calc(100% - 1px));
  left:var(--menu-position-left, auto);
  width:var(--menu-viewport-width, min(332px, calc(100vw - 24px)));
  max-height:max(0px, calc(var(--menu-viewport-space, var(--menu-fallback-space)) - 12px - env(safe-area-inset-bottom, 0px)));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-padding-block:12px;
}
@supports(height:100dvh) { .main-menu { --menu-fallback-space:calc(100dvh - 72px); } }
.main-menu.open { display:flex; flex-direction:column; }
.main-menu > * { flex-shrink:0; }
.category-menu-group { display:grid; min-width:0; min-height:0; }
.main-menu .category-menu-toggle { width:100%; display:flex; align-items:center; text-align:start; gap:13px; }
.category-menu-arrow { margin-inline-start:auto; font-size:1.15rem; color:var(--muted); }
.category-menu-toggle[aria-expanded="true"] .category-menu-arrow { transform: rotate(180deg); }
.category-menu-list { max-height:var(--category-menu-height, min(330px, 44vh)); min-height:0; overflow-y:auto; overscroll-behavior:auto; padding-block:4px; padding-inline:9px 0; border-inline-start:2px solid var(--border); margin-block:0; margin-inline:18px 0; }
.main-menu .category-menu-link { display:flex; justify-content:space-between; align-items:center; gap:9px; min-height:44px; padding:7px 10px; font-size:.89rem; font-weight:650; line-height:1.25; }
.main-menu .category-menu-link[aria-current="page"] { background:var(--soft); color:var(--blue); }
.category-menu-link span:first-child { min-width:0; overflow-wrap:anywhere; }
.category-menu-count { flex:0 0 auto; min-width:27px; border-radius:999px; background:var(--soft); border:1px solid var(--border); text-align:center; padding:1px 6px; font-size:.77rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.category-menu-error { display:block; padding:9px 10px; font-size:.85rem; color:var(--muted); }
.active-archive-category { display:inline-flex; padding:6px 12px; border-radius:999px; background:var(--soft); border:1px solid var(--border); color:var(--ink); margin:0 0 13px; font-weight:720; font-size:.91rem; }
.active-archive-category[hidden] { display:none; }
.vocab-title { direction:ltr; unicode-bidi:isolate; text-align:start; }
.vocab-meaning { unicode-bidi:plaintext; }
.archive-item-button { text-align:start; }
