/* In-page sign-in ceremony: idp.to's authorization page, framed.

   The signed-out landing behind this is fixed dark in both themes, but the
   card is not: idp.to's page inside the frame follows the visitor's own
   light/dark preference, and a card that ignored it would put a bright panel
   around a dark document. So the surround uses the theme tokens and lands on
   whichever side the frame does.

   idp.to's side of the frame is bare on purpose — chromeless, transparent
   background, zero margin — and the breathing room around the form is this
   card's to provide: its padding is the frame's visible margin, owned by the
   parent rather than the framed page. */

/* Scrolls, because the × has to be reachable at every height the app runs
   at. A short landscape phone cannot fit the card, and the page behind
   cannot scroll for it — html/body are fixed and overflow-hidden — so
   without this the way out could sit off-screen with no way to reach it.

   `touch-action: pan-y` names the one gesture this box wants. It is not
   undoing body's blanket `none`: a pan is permitted by the values from the
   touched element up to whichever element scrolls it, and that is this one, so
   body was never in the walk. What it buys is narrowing — the overlay would
   otherwise be `auto` — so pinch-zoom and the horizontal pan are ruled out and
   the vertical one is all that is left. */
.ceremonyOverlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background-color: rgb(6 16 14 / 62%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ceremonyOverlayIn 150ms var(--ease) both;
}

@keyframes ceremonyOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* `margin: auto` rather than the overlay centring it: a flex item centred with
   `align-items` has its overflowing top clipped away, and the × lives up
   there. */
.ceremonyCard {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: min(100%, 460px);
  margin: auto;
  padding: var(--sp-5);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: ceremonyCardIn 180ms var(--ease) both;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

.ceremonyClose {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: var(--sp-2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--text-3);
  border-radius: var(--r-sm);
  transition:
    color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.ceremonyClose:hover {
  color: var(--text);
  background-color: var(--surface-3);
}

/* The frame's seat. A minimum height as the fallback rather than a size that
   follows the frame's document: a refused document leaves the element
   zero-sized and its own height unreadable, so the box holds this shape until
   idp.to's size report says what the form actually needs (the component
   applies that inline) — and a frame that never loads never reports, keeping
   the fallback. Undecorated — no border, no fill — so the card's padding
   reads as the frame's margin and nothing around the form looks like
   chrome. */
.ceremonyStage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  overflow: hidden;
}

.ceremonyFrame {
  width: 100%;
  align-self: stretch;
  border: none;
  /* idp.to's page paints its own background; tell it which one to pick. */
  color-scheme: light dark;
}

.ceremonyStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  font-size: var(--fs-base);
  line-height: 1.5;
  text-align: center;
  color: var(--text-2);
}

.ceremonyStatusFailed {
  color: var(--danger);
}

.ceremonySpinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: var(--r-full);
  animation: ceremonySpin 700ms linear infinite;
}

@keyframes ceremonySpin {
  to {
    transform: rotate(360deg);
  }
}

/* Give the frame back what the viewport does not have. The overlay scrolls
   whatever is still too tall, but a shorter frame keeps the whole card —
   frame and × — on screen together where it can. */
@media (max-height: 720px) {
  .ceremonyStage {
    min-height: 320px;
  }
}

@media (max-height: 560px) {
  .ceremonyStage {
    min-height: 220px;
  }
}

@media (max-width: 480px) {
  .ceremonyOverlay {
    padding: var(--sp-3);
  }

  .ceremonyCard {
    padding: var(--sp-4);
  }
}

/* The flow's failure notice, for a host with no banner of its own.

   FOR: a sign-in that cannot even start writes its reason to the flow's error
   signal with no modal on screen to carry it — the visitor pressed the message
   box and nothing happened. On the card that reason
   lands in `.signInError` inside the layout. In the app there is no such slot,
   so this is one: bottom-centre, above every surface except the ban lockout,
   and dismissible because nothing else on the page will clear it.

   `position: fixed` rather than a slot in the header, so it does not reflow
   the chrome or push the timeline; `max-width` keeps a long reason from
   spanning a wide screen. */
.signInNotice {
  position: fixed;
  bottom: var(--sp-4);
  left: 50%;
  z-index: 1200;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  box-sizing: border-box;
  width: max-content;
  max-width: min(calc(100% - 2 * var(--sp-4)), 520px);
  padding: 10px 10px 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  transform: translateX(-50%);
}

.signInNoticeText {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.signInNoticeClose {
  flex-shrink: 0;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  opacity: 70%;
}

.signInNoticeClose:hover {
  opacity: 100%;
}