/* drawer (from apps/emiomer/public/assets/site.css .drawer and core.js modal(), the version the owner confirmed on his
   iPhone on 25.10.2026). A side panel on a native <dialog>. These rules are ONLY the resting states: drawer.js slides
   the panel and fades the scrim with element.animate() and explicit from/to keyframes. Don't add CSS transitions to
   them: on iPhone (Chrome on iOS, WebKit) a transition on a panel inside a just-opened top-layer <dialog> lost its
   starting state, so the panel flashed open, sat on the wrong side, then snapped.
   The side is PHYSICAL: data-side="left" (the default, the inline end of a Hebrew page) or "right". Never position
   this panel with inset-inline-*: iOS resolved inset-inline-end inside the dialog as right: 0 while the closed
   transform pushed left, so the "hidden" panel sat on screen and swept across the page.
   Tune a site by overriding these tokens in its own CSS (the times and curves are in drawer.js). */
:root {
  --dr-width: min(440px, 88%);  /* 88% on phones: the scrim shows beside it (tap there to close) */
  --dr-scrim: rgba(28, 26, 23, .45);
  --dr-bg: #fff;
  --dr-ease: cubic-bezier(.16, 1, .3, 1); /* the lines' rise */
}

/* The dialog fills the screen and is transparent: the scrim and the panel are its children. */
[data-drawer] {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; overscroll-behavior: contain;
}
[data-drawer]::backdrop { background: transparent; }
[data-drawer-scrim] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--dr-scrim); opacity: 0; touch-action: none; }
[data-drawer].is-open [data-drawer-scrim] { opacity: 1; }

[data-drawer-panel] {
  position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: var(--dr-width);
  display: flex; flex-direction: column; background: var(--dr-bg); box-shadow: 0 0 60px rgba(0, 0, 0, .25);
  transform: translate3d(-102%, 0, 0); backface-visibility: hidden;
}
[data-drawer][data-side="right"] [data-drawer-panel] { left: auto; right: 0; transform: translate3d(102%, 0, 0); }
[data-drawer].is-open [data-drawer-panel] { transform: none; }
/* The part that scrolls (the lines); the head and foot stay put. */
[data-drawer-body] { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* The lines rise one after another while it opens (a keyframe animation, which starts fine in a just-opened dialog;
   drawer.js numbers them, --i). */
[data-drawer].is-opening [data-drawer-line] { animation: dr-rise .55s var(--dr-ease) both; animation-delay: calc(.16s + var(--i, 0) * .06s); }
@keyframes dr-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }