/*
  Zweck: Darstellung von Login-/Sitzungs-Overlay, Auth-Chip und zugehörigen Statusmeldungen.
  Zielpfad: /home/mckiede/public_html/design/auth.css
  Verantwortlich: mckie-Portal
*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#footer-auth-chip.footer-chip--site {
  border: none;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

#footer-auth-chip.footer-chip--site:hover,
#footer-auth-chip.footer-chip--site:focus-visible {
  background: color-mix(in srgb, var(--violet) 86%, white);
  outline: 0.14rem solid color-mix(in srgb, var(--violet) 55%, transparent);
  outline-offset: 0.12rem;
}

body.auth-overlay-open {
  overflow: hidden;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--black) 72%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

.auth-overlay.is-open {
  opacity: 1;
  visibility: visible;
  display: grid;
}

.auth-overlay[hidden]:not(.is-open) {
  display: none;
}

.auth-modal {
  width: min(100%, calc(var(--side-rail-width) + 2.5rem));
  padding: 1.35rem 1rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  color: var(--peach);
  box-shadow:
    var(--shadow),
    inset 0 0 0 var(--segment-line) var(--orange),
    inset var(--dock-offset-sm) 0 0 color-mix(in srgb, var(--orange) 22%, transparent);
  transform: translateY(0.4rem) scale(0.98);
  transition: transform 0.4s ease-in-out;
}

.auth-overlay.is-open .auth-modal {
  transform: translateY(0) scale(1);
}

.auth-modal__title {
  margin: 0 0 0.85rem;
  font-size: clamp(0.72rem, 2.5vw, 0.95rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
}

.auth-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.auth-form__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.auth-form input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: var(--segment-line-thin) solid color-mix(in srgb, var(--orange) 45%, transparent);
  background: var(--black);
  color: var(--peach);
  font: inherit;
}

.auth-form__error {
  margin: 0;
  font-size: 0.86rem;
  color: var(--red);
}

.auth-form__error[hidden] {
  display: none;
}

/* Popup-Aktionen: gleiche rail-button-Größe wie Start/Module */
.auth-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: 0.5rem;
}

.auth-modal .rail-button {
  width: 100%;
  margin-left: 0;
  border-radius: var(--radius-md);
}

.side-block-bottom .side-cutout--internal {
  top: 1.15rem;
  /* Immer Platz für mind. 2 Rail-Buttons reservieren (2×3.4rem + 1×0.5rem Gap + vertikales Padding) */
  min-height: calc(2 * var(--rail-button-min-height) + var(--gap) + 2.7rem);
}

.side-internal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.side-internal-actions[hidden] {
  display: none;
}

/* Daten-Teaser: rot betont, ohne Durchstreichung */
.rail-button.is-teaser {
  --tone: var(--red);
  text-decoration: none;
  opacity: 1;
  color: color-mix(in srgb, var(--red) 88%, var(--peach));
  cursor: not-allowed;
}

.rail-button.is-teaser:hover,
.rail-button.is-teaser:focus-visible {
  filter: none;
  color: var(--red);
  text-shadow: 0 0 0.65rem color-mix(in srgb, var(--red) 45%, transparent);
}

@media (max-width: 1180px) {
  .side-block-bottom {
    display: none;
  }

  .side-rail.is-authenticated .side-block-bottom {
    display: contents;
  }

  .side-block-bottom .side-cutout--internal {
    position: static;
    min-height: 0;
    padding: 0;
  }

  .side-rail.is-authenticated .side-cutout--internal {
    display: contents;
  }

  .side-rail.is-authenticated .side-internal-actions {
    display: contents;
  }

  .side-rail.is-authenticated .side-internal-actions[hidden] {
    display: none;
  }

  .side-rail.is-authenticated .side-internal-actions .rail-button {
    width: 100%;
    margin-left: 0;
  }
}

/* ── BIO-SCAN Sequenz ─────────────────────────────────────────── */

/* Sichtbarkeit per visibility+opacity – kein Layout-Shift, kein transform */
.bioscan-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bioscan-reveal {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bioscan-status {
  margin: 0 0 0.35rem;
  font-size: clamp(0.78rem, 2.5vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bioscan-status--init { color: var(--blue); }

.bioscan-status--fail {
  color: var(--red);
  text-shadow: 0 0 0.6rem color-mix(in srgb, var(--red) 50%, transparent);
}

.bioscan-fail {
  margin: 0 0 0.35rem;
  font-size: clamp(0.78rem, 2.5vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 0 0 0.6rem color-mix(in srgb, var(--red) 50%, transparent);
}

.bioscan-manual {
  margin: 0.5rem 0 0.35rem;
  font-size: clamp(0.72rem, 2.2vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
}

.bioscan-enter {
  margin: 0.5rem 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bioscan-feedback {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  line-height: 1.3; /* exakt = min-height → kein Sprung beim Befüllen */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  min-height: 1.3em;
  visibility: hidden;
}

/* bioscan-reveal überschreibt nur visibility, kein opacity mehr nötig */
.bioscan-feedback.bioscan-reveal {
  visibility: visible;
}

.bioscan-feedback--denied {
  color: var(--red);
  text-shadow: 0 0 0.7rem color-mix(in srgb, var(--red) 55%, transparent);
}

.bioscan-feedback--welcome {
  color: var(--green);
  text-shadow: 0 0 0.7rem color-mix(in srgb, var(--green) 55%, transparent);
}

/* AUTHORIZED grün im Session-Modal */
.auth-modal__lead--authorized {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 0.5rem color-mix(in srgb, var(--green) 40%, transparent);
}