/* Make Interfaces drawer-menu v0.1.1. Theme tokens/content, preserve structural rules. Requires the shared overlay-backdrop.css. */
.mi-drawer {
  --mi-drawer-surface: oklch(0.99 0.004 90);
  --mi-drawer-text: oklch(0.24 0.015 250);
  --mi-drawer-muted: oklch(0.49 0.015 250);
  --mi-drawer-accent: oklch(0.4 0.07 250);
  --mi-drawer-width: 25rem;
  /* Preserve a visible backdrop strip; a project can explicitly choose 0px. */
  --mi-drawer-edge-gap: min(3rem, 10vw);
  --mi-drawer-padding: clamp(1rem, 4vw, 2rem);
  --mi-drawer-gap: 1.5rem;
  --mi-drawer-radius: 0;
  --mi-drawer-font: inherit;
  --mi-drawer-direction: 1;
  position: fixed;
  inset: 0 0 0 auto;
  inline-size: min(var(--mi-drawer-width), calc(100% - var(--mi-drawer-edge-gap)));
  block-size: 100vh;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mi-drawer-text);
  font: var(--mi-drawer-font);
  overflow: visible;
  overflow-wrap: anywhere;
}
.mi-drawer[data-side="left"] { inset: 0 auto 0 0; --mi-drawer-direction: -1; }
.mi-drawer, .mi-drawer *, .mi-drawer *::before, .mi-drawer *::after { box-sizing: border-box; }
.mi-drawer__surface {
  inline-size: 100%;
  block-size: 100%;
  background: var(--mi-drawer-surface);
  border-radius: var(--mi-drawer-radius);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05), 0 0.5rem 2.5rem oklch(0 0 0 / 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateX(calc(100% * var(--mi-drawer-direction)));
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
.mi-drawer[data-mi-drawer-state="closing"] .mi-drawer__surface {
  transform: translateX(calc(70% * var(--mi-drawer-direction)));
}
.mi-drawer[data-mi-drawer-open] .mi-drawer__surface {
  opacity: 1;
  transform: translateX(0);
  transition-duration: 240ms, 300ms;
}
/* One scroll viewport. Auto margin uses spare height, then yields to normal flow. */
.mi-drawer__layout {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  min-inline-size: 0;
  gap: var(--mi-drawer-gap);
  padding: var(--mi-drawer-padding);
  padding-block-start: max(var(--mi-drawer-padding), env(safe-area-inset-top));
  padding-block-end: max(var(--mi-drawer-padding), env(safe-area-inset-bottom));
  padding-inline-start: max(var(--mi-drawer-padding), env(safe-area-inset-left));
  padding-inline-end: max(var(--mi-drawer-padding), env(safe-area-inset-right));
}
.mi-drawer__layout > * { flex: none; min-inline-size: 0; }
.mi-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mi-drawer__header > :first-child { min-inline-size: 0; }
.mi-drawer__header > [data-mi-drawer-close] { flex: none; }
.mi-drawer__footer { margin-block-start: auto; }
.mi-drawer :is(h1, h2, h3) { text-wrap: balance; }
.mi-drawer p { text-wrap: pretty; }
.mi-drawer :focus-visible { outline: 2px solid var(--mi-drawer-accent); outline-offset: 3px; }
.mi-drawer [hidden] { display: none; }

/* The outer hit target stays still; its visual owns surface, border, label and icon. */
.mi-drawer-button {
  display: inline-grid;
  min-inline-size: max(44px, 2.75rem);
  min-block-size: max(44px, 2.75rem);
  max-inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--mi-drawer-button-radius, 0.625rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.mi-drawer-button > .mi-drawer-button__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-inline-size: 0;
  padding: var(--mi-drawer-button-padding, 0.75rem 1rem);
  border: 1px solid var(--mi-drawer-button-border, transparent);
  border-radius: inherit;
  background: var(--mi-drawer-button-surface, var(--mi-drawer-accent, oklch(0.4 0.07 250)));
  color: var(--mi-drawer-button-text, oklch(1 0 0));
  box-shadow: var(--mi-drawer-button-shadow, 0 1px 2px oklch(0 0 0 / 0.08));
  transition: scale 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
  pointer-events: none;
}
.mi-drawer-button:active:not(:disabled):not([data-mi-static]) > .mi-drawer-button__visual { scale: 0.96; }
.mi-drawer-button:focus-visible { outline: 2px solid var(--mi-drawer-accent, currentColor); outline-offset: 3px; }
.mi-drawer-button:disabled { opacity: 0.55; cursor: default; }
.mi-drawer-button__visual svg { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.mi-drawer-button--icon { inline-size: max(44px, 2.75rem); block-size: max(44px, 2.75rem); }
.mi-drawer-button--icon > .mi-drawer-button__visual { padding: 0.625rem; }
@media (prefers-reduced-motion: reduce) {
  .mi-drawer__surface, .mi-drawer-button > .mi-drawer-button__visual { transition: none !important; }
  .mi-drawer__surface { transform: none !important; }
  .mi-drawer-button:active:not(:disabled):not([data-mi-static]) > .mi-drawer-button__visual { scale: 1; }
}