/* Navigation drawer: a body-level layer above the bottom bar (40) and quick search (100), below toasts (120).
   It lives outside the blurred header, so its panel is a solid surface and position:fixed covers the whole viewport. */
.drawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; pointer-events: none; transition: visibility 0s linear 220ms; }
.drawer.open, .drawer:target { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(10, 20, 40, .55); opacity: 0; transition: opacity 220ms ease-out; -webkit-tap-highlight-color: transparent; }
.drawer.open .drawer-scrim, .drawer:target .drawer-scrim { opacity: 1; }

/* Right edge in LTR, left edge in RTL */
.drawer-panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(85vw, 360px); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 40px rgba(10, 20, 40, .28);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(100%); transition: transform 220ms ease-out; will-change: transform; }
[dir="rtl"] .drawer-panel { transform: translateX(-100%); }
.drawer.open .drawer-panel, .drawer:target .drawer-panel { transform: none; }
.drawer.dragging .drawer-panel, .drawer.dragging .drawer-scrim { transition: none; }

html.drawer-lock, html.drawer-lock body, html:has(.drawer:target), html:has(.drawer:target) body { overflow: hidden; }

.drawer-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--line); }
.drawer-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .35rem; margin: -.35rem; border-radius: 12px; color: inherit; text-decoration: none; }
.drawer-me:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.drawer-who { min-width: 0; display: grid; gap: .1rem; justify-items: start; }
.drawer-who b { font: 600 1rem/1.3 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.drawer-who small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.drawer-role { margin-top: .2rem; padding: .12rem .55rem; border-radius: 999px; font: 600 .72rem/1.4 var(--f-display);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
html[data-theme="dark"] .drawer-role { color: var(--accent-2, #8bb8ff); }
.drawer-guest { flex: 1; display: flex; gap: .5rem; }
.drawer-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.drawer-x:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* The list scrolls on its own; the page behind never does */
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 .5rem 1rem; }
.drawer-sec + .drawer-sec { border-top: 1px solid var(--line); margin-inline: .75rem; padding-inline: 0; }
.drawer-sec + .drawer-sec .drawer-item { margin-inline: -.75rem; }
.drawer-label { margin: 0; padding: 24px .75rem 6px; font: 600 12px/1.4 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.drawer-sec + .drawer-sec .drawer-label { padding-inline: 0; }
:lang(ar) .drawer-label { letter-spacing: 0; }
.drawer-item { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 0 .75rem; border: 0; border-radius: 10px; background: none;
  color: inherit; font: 500 1rem/1.2 var(--f-display); text-align: start; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.drawer-item svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.drawer-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.drawer-item:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.drawer-item[aria-current] { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.drawer-item[aria-current] svg { color: currentColor; }
.drawer-foot { padding-top: .75rem; }
.drawer-foot form { margin: 0; }
.drawer-out, .drawer-out svg { color: var(--danger, #c62d42); }
.drawer-item .moon, html[data-theme="dark"] .drawer-item .sun { display: none; }
html[data-theme="dark"] .drawer-item .moon { display: contents; }
.drawer-item .sun { display: contents; }

/* Language: a two-way segmented toggle */
.drawer-lang { cursor: default; }
.drawer-lang:hover, .drawer-lang:active { background: none; }
.drawer-seg { margin-inline-start: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.drawer-seg a { padding: .35rem .7rem; border-radius: 999px; font-size: .85rem; color: var(--muted); text-decoration: none; }
.drawer-seg a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(10, 20, 40, .18); }

.drawer :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-scrim, .drawer-panel { transition: none; }
}
@media (min-width: 1101px) { .drawer { display: none; } }

.help-page { max-width: 720px; padding-bottom: 3rem; }
.help-list { display: grid; gap: .25rem; padding: .5rem; }
.help-contact { margin-top: 1.25rem; }