/* Shared burger + right-hand nav sheet for narrow viewports. Used by all three
   apps; classes are namespaced a4n- to avoid colliding with the library's
   stylesheet or the survey app's Tailwind utilities.

   The breakpoint is 1024px, matching Tailwind's `lg` so the survey app's existing
   `hidden lg:flex` nav list lines up with it without a custom variant. */

.a4n-burger {
  display: none;
  /* Column, or the three bars lay out side by side as flex items. */
  flex-direction: column;
  align-items: center; justify-content: center;
  /* The bars are spaced by `span + span` margin alone. gap: 0 is explicit so a
     host page's own button styling cannot inject one and shift them. */
  gap: 0;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none; border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer; padding: 0;
  transition: border-color 0.2s;
}
.a4n-burger:hover { border-color: rgba(255, 255, 255, 0.4); }
.a4n-burger span {
  display: block; width: 18px; height: 1px;
  background: #ffffff;
  transition: transform 0.25s, opacity 0.25s;
}
.a4n-burger span + span { margin-top: 5px; }

.a4n-scrim {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.a4n-scrim.a4n-open { opacity: 1; pointer-events: auto; }

.a4n-sheet {
  position: fixed; top: 0; right: 0; z-index: 1201;
  width: min(360px, 86vw); height: 100%;
  display: flex; flex-direction: column;
  background: #080808;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 26px 0 32px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.a4n-sheet.a4n-open { transform: translateX(0); }

.a4n-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.a4n-sheet-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.a4n-close {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.a4n-close:hover { color: #ffffff; }

.a4n-items { display: flex; flex-direction: column; padding: 8px 0; }
.a4n-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 17px 28px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.a4n-item:hover { color: #ffffff; background: rgba(255, 255, 255, 0.04); }
.a4n-item.a4n-current { color: #FFFF00; }
/* Separates mirrored nav groups, e.g. the survey app's admin items. */
.a4n-divider { height: 1px; margin: 10px 28px; background: rgba(255, 255, 255, 0.07); }

@media (max-width: 1023.98px) {
  .a4n-burger { display: inline-flex; }
}
/* Above the breakpoint the sheet must never linger, even if it was left open
   while the window was resized. */
@media (min-width: 1024px) {
  .a4n-scrim, .a4n-sheet { display: none; }
}