/* 26-netlify-identity.css — the Netlify Identity widget.
 *
 * The widget injects an <iframe id="netlify-identity-widget"> into <body>
 * with an inline style of:
 *     position: fixed; top: 0; left: 0;
 *     width: 100%; height: 100%;
 *     overflow: visible; background: transparent;
 *     display: none; z-index: 99;
 *
 * Two problems that this file fixes:
 *
 * 1. THE IFRAME NEVER GOES AWAY.
 *    The widget toggles `display` between "none" and "block" on the SAME
 *    element. When it closes, that element keeps `display: block` in
 *    some flows (and a second, stale copy can be left behind entirely).
 *    Either way the iframe stays as a full-viewport, pointer-events:auto
 *    layer at z-index 99, so it swallows EVERY click on the page. On
 *    mobile that made the whole app untouchable — including the
 *    sign-in button, so login was impossible.
 *
 * 2. THE WIDGET IS UNDER OUR MODALS.
 *    Our overlays sit at z-index 400-501, the widget at 99. Opening the
 *    widget from inside the Settings modal therefore rendered it BEHIND
 *    the modal and it could not be interacted with.
 *
 * The fix below:
 *   - raises the widget above our overlays,
 *   - gives it a real backdrop so it reads as a modal,
 *   - and, crucially, makes the widget's own open/close state drive the
 *     iframe so a closed widget can never keep a full-screen hit area.
 *
 * The widget's own content is inside an iframe, so we cannot restyle it
 * from here. We can only control the frame and its backdrop.
 */

/* ── the widget frame ─────────────────────────────────────────── */

#netlify-identity-widget {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;

  /* Above every QUAD overlay (the highest of which is z-index 999). */
  z-index: 10000 !important;

  /* The widget paints its own modal on a white page. A dark backdrop
     keeps it inside the QUAD design language and gives the light
     widget surface something to sit on. */
  background: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  /* Only intercept clicks while it is actually open. */
  pointer-events: auto !important;
}

/* Closed state. The widget sets inline `display: none`, which we
   override so we can keep the element measurable — but a closed widget
   must never be a hit target. */
#netlify-identity-widget[hidden],
#netlify-identity-widget:not([data-ni-open="1"]) {
  display: none !important;
  pointer-events: none !important;
}

/* The widget sometimes leaves a second, orphaned copy behind. Anything
   without the open marker is inert. */
#netlify-identity-widget:not([data-ni-open="1"]) {
  display: none !important;
  pointer-events: none !important;
}

/* ── narrow viewports ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #netlify-identity-widget {
    /* Full-bleed on mobile, but the widget's own modalDialog is sized
       for a desktop split layout. Constraining the frame to the phone
       width and centring it stops the dialog from being cut off. */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.92) !important;
  }
}