/* =========================================================
   ZOMNIVERSE AUTHENTICATION
   Shared account controls and Google sign-in dialog

   File:
   public_html/zomniverse/Styles/shared/zomniverse-auth.css
========================================================= */

/* =========================================================
   AUTHENTICATION VISIBILITY
========================================================= */

[data-zom-auth-guest][hidden],
[data-zom-auth-user][hidden],
[data-zom-auth-avatar][hidden] {
  display: none !important;
}

/* =========================================================
   SHARED ACCOUNT CONTROL
   Used by wider account areas outside the compact MARSS dock.
========================================================= */

.zom-account-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.zom-account-control [data-zom-auth-user] {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  min-width: 0;
}

.zom-account-control button,
.zom-account-control a {
  padding: 0.45rem 0.7rem;

  border: 1px solid rgba(91, 235, 215, 0.35);
  border-radius: 999px;

  background: rgba(65, 210, 190, 0.12);
  color: inherit;

  font: inherit;
  text-decoration: none;

  cursor: pointer;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.zom-account-control button:hover,
.zom-account-control a:hover,
.zom-account-control button:focus-visible,
.zom-account-control a:focus-visible {
  color: #ffffff;

  background: rgba(65, 210, 190, 0.2);
  border-color: rgba(91, 235, 215, 0.52);

  transform: translateY(-1px);
}

.zom-account-avatar {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 50%;

  object-fit: cover;
}

/* =========================================================
   ZOMNIVERSE AUTH DIALOG
   Bioinformatics dashboard visual language
========================================================= */

.zom-auth-dialog {
  position: fixed;

  width: min(92vw, 520px);
  max-width: 520px;

  padding: 0;
  overflow: hidden;

  border: 1px solid rgba(143, 212, 189, 0.28);
  border-radius: 26px;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(143, 212, 189, 0.13),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(127, 181, 255, 0.12),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(10, 20, 34, 0.995),
      rgba(4, 8, 18, 0.995)
    );

  color: rgba(244, 248, 255, 0.96);

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(143, 212, 189, 0.05),
    0 0 44px rgba(143, 212, 189, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.zom-auth-dialog[open] {
  animation: zomAuthDialogIn 180ms ease-out;
}

@keyframes zomAuthDialogIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.zom-auth-dialog::backdrop {
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(43, 72, 110, 0.16),
      transparent 48%
    ),
    rgba(1, 4, 10, 0.82);

  backdrop-filter: blur(12px);
}

/* =========================================================
   DIALOG DECORATIVE GLOW
========================================================= */

.zom-auth-dialog__glow {
  position: absolute;
  top: -90px;
  left: -70px;

  width: 240px;
  height: 240px;

  border-radius: 999px;

  background: rgba(143, 212, 189, 0.09);

  filter: blur(50px);

  pointer-events: none;
}

/* =========================================================
   DIALOG HEADER
========================================================= */

.zom-auth-dialog__header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding: 28px 30px 18px;
}

.zom-auth-dialog__identity {
  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 0;
}

.zom-auth-dialog__icon {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(143, 212, 189, 0.28);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(143, 212, 189, 0.25),
      transparent 70%
    ),
    rgba(12, 28, 38, 0.88);

  color: var(--zom-green, #8fd4bd);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 22px rgba(143, 212, 189, 0.12);
}

.zom-auth-dialog__kicker {
  margin: 0 0 7px;

  color: rgba(143, 212, 189, 0.78);

  font-size: 0.7rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.zom-auth-dialog__title {
  margin: 0;

  color: rgba(244, 248, 255, 0.98);

  font-size: clamp(1.65rem, 4vw, 2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* =========================================================
   QUIET CLOSE BUTTON
========================================================= */

.zom-auth-dialog__close {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(145, 164, 220, 0.14);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.025);
  color: rgba(182, 194, 229, 0.5);

  font: inherit;
  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.zom-auth-dialog__close:hover,
.zom-auth-dialog__close:focus-visible {
  color: rgba(244, 248, 255, 0.9);

  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(145, 164, 220, 0.25);

  transform: translateY(-1px);
}

/* PATCH 2026-08-30 | AVATAR PICKER CLOSE BUTTON
   Correction: this reuses zomniverse-datasets.js's ACTUAL SVG close icon
   (.zom-datasets-close--icon, built from icon("cancel") -> the
   #zom-icon-cancel symbol, path "M6 6l12 12M18 6L6 18") - a genuinely
   different, circular, icon-based button, not just a restyled ×
   glyph as an earlier pass here assumed. The path is inlined directly
   (same two-line X, same viewBox) rather than referencing that symbol via
   <use href="#zom-icon-cancel">, since this dialog can open from pages
   that may not have zomniverse-workspace-icons.php's sprite in the DOM -
   inlining guarantees it always renders. Scoped to this one dialog so the
   unrelated sign-in dialog's close button is untouched. */
.zom-avatar-picker .zom-auth-dialog__close {
  width: 38px;
  height: 38px;
  flex-basis: 38px;

  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 50%;

  background: #20242e;
  color: #b7bcc5;
}

.zom-avatar-picker .zom-auth-dialog__close:hover,
.zom-avatar-picker .zom-auth-dialog__close:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: #262b37;
  color: #e6e8eb;

  transform: none;
}

.zom-avatar-picker__close-icon {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   DIALOG DESCRIPTION
========================================================= */

.zom-auth-dialog__description {
  position: relative;
  z-index: 1;

  margin: 0;
  padding: 0 30px;

  color: rgba(196, 211, 225, 0.82);

  font-size: 0.98rem;
  line-height: 1.65;
}

/*
  Compatibility for any remaining dialog markup that still
  uses plain h2 and p elements.
*/

.zom-auth-dialog > h2 {
  margin: 0;
  padding: 28px 30px 0;

  color: rgba(244, 248, 255, 0.98);

  font-size: clamp(1.65rem, 4vw, 2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.zom-auth-dialog > p {
  margin: 18px 0 0;
  padding: 0 30px;

  color: rgba(196, 211, 225, 0.82);

  font-size: 0.98rem;
  line-height: 1.65;
}

/* =========================================================
   PRIVACY / SECURITY NOTE
========================================================= */

.zom-auth-dialog__security-note {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 20px 30px 0;
  padding: 12px 14px;

  border: 1px solid rgba(143, 212, 189, 0.13);
  border-radius: 15px;

  background: rgba(143, 212, 189, 0.045);
  color: rgba(181, 215, 207, 0.78);

  font-size: 0.78rem;
  line-height: 1.45;
}

.zom-auth-dialog__security-note i {
  margin-top: 2px;

  color: rgba(143, 212, 189, 0.82);
}

/* =========================================================
   GOOGLE SIGN-IN MOUNT
   Let Google control its generated iframe dimensions
========================================================= */

.zom-auth-dialog__google,
.zom-auth-dialog [data-zom-google-button] {
  position: relative;
  z-index: 1;

  width: max-content;
  max-width: calc(100% - 60px);
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin: 24px 30px 0;
  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

/*
  Do not force the dimensions of Google's generated elements.
  Google adds approximately 20px around the requested button
  width for internal spacing and focus rendering.
*/

.zom-auth-dialog [data-zom-google-button] > div {
  width: auto !important;
  max-width: none !important;

  overflow: visible !important;
}

.zom-auth-dialog [data-zom-google-button] iframe {
  width: auto;
  max-width: none;

  overflow: visible;

  border: 0;
  box-shadow: none;
}

/* =========================================================
   DIALOG ACTIONS
========================================================= */

.zom-auth-dialog__actions {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;
  padding: 14px 30px 24px;
}

/* =========================================================
   DISCREET CANCEL / NOT NOW ACTION
========================================================= */

.zom-auth-dialog__cancel,
.zom-auth-dialog__actions > button {
  min-width: auto;
  min-height: auto;

  padding: 6px 8px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: rgba(151, 165, 207, 0.46);

  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 600;

  cursor: pointer;

  box-shadow: none;

  transition:
    color 150ms ease,
    background 150ms ease;
}

.zom-auth-dialog__cancel:hover,
.zom-auth-dialog__cancel:focus-visible,
.zom-auth-dialog__actions > button:hover,
.zom-auth-dialog__actions > button:focus-visible {
  color: rgba(198, 209, 240, 0.78);

  background: rgba(255, 255, 255, 0.025);

  outline: none;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.zom-auth-dialog button:focus-visible,
.zom-auth-dialog a:focus-visible {
  outline: 2px solid rgba(143, 212, 189, 0.72);
  outline-offset: 3px;
}

/* =========================================================
   AVATAR PICKER
   Reuses the .zom-auth-dialog shell; adds the selectable grid.
========================================================= */

/* PATCH 2026-08-30 | MOBILE SCROLL CONTAINMENT
   The base .zom-auth-dialog has no max-height and overflow:hidden, which
   is fine for the short sign-in dialog but not for this one - with the
   library grid, "Your photo", and the dropzone all at once, this dialog
   is routinely taller than a phone viewport. Without a height cap the
   <dialog> box just grows past the viewport with nothing to scroll IT,
   so touch drags fall through to the page behind (the actual bug: the
   backdrop is blurred/inert-looking but the page underneath was still
   scrollable). dvh accounts for mobile browser chrome show/hide; the
   plain vh line is a fallback for browsers that don't support dvh (an
   unsupported value is ignored, so the later valid one simply wins).
   Higher specificity than .zom-auth-dialog (element+class vs. class
   alone) so this isn't a source-order gamble, and scoped here rather
   than on the shared base class so the sign-in dialog is untouched. */
dialog.zom-avatar-picker {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);

  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 560px) {
  dialog.zom-avatar-picker {
    position: fixed;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

.zom-avatar-picker__grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;

  margin: 18px 30px 0;
}

.zom-avatar-picker__option {
  display: grid;
  place-items: center;

  padding: 8px;

  border: 1px solid transparent;
  border-radius: 14px;

  background: none;
  color: rgba(196, 211, 225, 0.82);

  font: inherit;

  cursor: pointer;

  transition: transform 150ms ease;
}

.zom-avatar-picker__option img {
  width: 56px;
  height: 56px;

  border-radius: 50%;

  transition: filter 150ms ease;
}

.zom-avatar-picker__option:hover,
.zom-avatar-picker__option:focus-visible {
  transform: translateY(-1px);
}

/* No border/background change on hover — only the icon itself lights up. */
.zom-avatar-picker__option:hover img,
.zom-avatar-picker__option:focus-visible img {
  filter: brightness(1.22) saturate(1.15);
}

.zom-avatar-picker__option.is-selected {
  border-color: rgba(91, 235, 215, 0.72);
  background: rgba(65, 210, 190, 0.12);
  color: rgba(244, 248, 255, 0.96);
}

.zom-avatar-picker__option:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* PATCH 2026-08-30 | YOUR PHOTO TILE
   A real photo doesn't need the same selection ring the abstract library
   icons use to stay legible against the dark background - it's already
   self-evidently "your photo". No padding/border/background in any
   state (including .is-selected), and object-fit guards against
   distortion regardless of the source image's exact pixel size. */
.zom-avatar-picker__option[data-zom-avatar-use-upload] {
  width: 64px;
  height: 64px;

  padding: 0;
  overflow: hidden;
}

.zom-avatar-picker__option[data-zom-avatar-use-upload],
.zom-avatar-picker__option[data-zom-avatar-use-upload].is-selected {
  border-color: transparent;
  background: none;
}

.zom-avatar-picker__option[data-zom-avatar-use-upload] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zom-avatar-picker__section {
  position: relative;
  z-index: 1;

  margin: 18px 30px 0;
}

.zom-avatar-picker__section-label {
  margin: 0 30px 8px;

  color: rgba(151, 165, 207, 0.68);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* .zom-avatar-picker__section already provides the 30px horizontal inset
   for everything inside it - a nested label adding its own 30px on top
   double-indented "Your photo" relative to the grid/remove-button below
   it, which shared that same section margin instead. */
.zom-avatar-picker__section .zom-avatar-picker__section-label {
  margin-left: 0;
  margin-right: 0;
}

.zom-avatar-picker__section:not([hidden]) + .zom-avatar-picker__section-label {
  margin-top: 18px;
}

.zom-avatar-picker__grid--upload {
  grid-template-columns: repeat(auto-fill, minmax(64px, 64px));
  margin: 0;
}

/* PATCH 2026-08-30 | SHARED DROPZONE
   The .zom-dropzone base rules live in Styles/shared/file_dropzone.css
   (colors as overridable custom properties). This just retunes those
   properties to the dark dialog palette already used elsewhere in this
   file, instead of forking the component. Selector deliberately combines
   both classes (specificity 0,2,0) rather than relying on
   .zom-avatar-picker__dropzone alone (0,1,0) — that would tie with
   .zom-dropzone's own base rule, and since file_dropzone.css loads AFTER
   this file in FrontendResourceManager.php, a tie would let the base
   light-theme values win instead of this override. */
.zom-dropzone.zom-avatar-picker__dropzone {
  --zom-dropzone-border: rgba(143, 212, 189, 0.28);
  --zom-dropzone-border-active: rgba(91, 235, 215, 0.72);
  --zom-dropzone-bg: rgba(255, 255, 255, 0.02);
  --zom-dropzone-bg-hover: rgba(143, 212, 189, 0.06);
  --zom-dropzone-bg-active: rgba(65, 210, 190, 0.12);
  --zom-dropzone-color: rgba(196, 211, 225, 0.82);
  --zom-dropzone-color-active: rgba(244, 248, 255, 0.96);

  width: 100%;
  margin-left: 0;

  font-weight: 700;
}

.zom-avatar-picker__dropzone.is-busy {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

.zom-avatar-picker__remove {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 8px;
  padding: 4px 2px;

  border: 0;
  background: none;

  color: rgba(151, 165, 207, 0.6);

  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;

  cursor: pointer;

  transition: color 150ms ease;
}

.zom-avatar-picker__remove svg {
  width: 15px;
  height: 15px;
}

.zom-avatar-picker__remove:hover,
.zom-avatar-picker__remove:focus-visible {
  color: rgba(230, 120, 120, 0.85);
}

.zom-avatar-picker__remove:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* =========================================================
   AVATAR CROP EDITOR
========================================================= */

.zom-avatar-editor {
  position: relative;
  z-index: 1;

  padding: 0 30px 24px;
}

.zom-avatar-editor__stage {
  display: flex;
  justify-content: center;

  margin: 14px 0;
}

.zom-avatar-editor__canvas {
  border-radius: 50%;
  border: 1px solid rgba(143, 212, 189, 0.28);

  background: rgba(255, 255, 255, 0.03);

  cursor: grab;
  touch-action: none;
}

.zom-avatar-editor__canvas.is-dragging {
  cursor: grabbing;
}

.zom-avatar-editor__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 12px;
}

.zom-avatar-editor__icon-btn {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  padding: 0;

  border: 1px solid rgba(143, 212, 189, 0.22);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.02);
  color: rgba(196, 211, 225, 0.86);

  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.zom-avatar-editor__icon-btn svg {
  width: 17px;
  height: 17px;
}

.zom-avatar-editor__icon-btn:hover,
.zom-avatar-editor__icon-btn:focus-visible {
  border-color: rgba(143, 212, 189, 0.48);
  background: rgba(143, 212, 189, 0.1);
}

.zom-avatar-editor__slider {
  flex: 1 1 auto;
  max-width: 160px;

  height: 4px;

  appearance: none;
  -webkit-appearance: none;

  border-radius: 999px;
  background: rgba(143, 212, 189, 0.18);

  cursor: pointer;
}

.zom-avatar-editor__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 15px;
  height: 15px;

  border-radius: 50%;
  background: rgba(91, 235, 215, 0.92);

  cursor: pointer;
}

.zom-avatar-editor__slider::-moz-range-thumb {
  width: 15px;
  height: 15px;

  border: 0;
  border-radius: 50%;
  background: rgba(91, 235, 215, 0.92);

  cursor: pointer;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {
  .zom-auth-dialog {
    width: calc(100vw - 24px);

    border-radius: 22px;
  }

  .zom-auth-dialog__header {
    gap: 14px;

    padding: 22px 20px 16px;
  }

  .zom-auth-dialog__identity {
    align-items: flex-start;
  }

  .zom-auth-dialog__icon {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 14px;
  }

  .zom-auth-dialog__title {
    font-size: 1.55rem;
  }

  .zom-auth-dialog__description {
    padding-right: 20px;
    padding-left: 20px;
  }

  .zom-auth-dialog > h2 {
    padding-right: 20px;
    padding-left: 20px;
  }

  .zom-auth-dialog > p {
    padding-right: 20px;
    padding-left: 20px;
  }

    .zom-auth-dialog__security-note {
    margin-right: 20px;
    margin-left: 20px;
    }

    .zom-auth-dialog__google,
    .zom-auth-dialog [data-zom-google-button] {
    margin-right: 20px;
    margin-left: 20px;
    }

  .zom-auth-dialog__actions {
    padding: 12px 20px 20px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .zom-auth-dialog[open] {
    animation: none;
  }

  .zom-account-control button,
  .zom-account-control a,
  .zom-auth-dialog__close,
  .zom-auth-dialog__cancel,
  .zom-auth-dialog__actions > button {
    transition: none;
  }
}
@media (max-width: 560px) {
  .zom-auth-dialog__google,
  .zom-auth-dialog [data-zom-google-button] {
    width: calc(100% - 40px);
    max-width: none;

    margin-right: 20px;
    margin-left: 20px;
  }

  .zom-auth-dialog [data-zom-google-button] > div,
  .zom-auth-dialog [data-zom-google-button] iframe {
    width: 100% !important;
  }
}