/* ==========================================================================
   mzyan — ui-guest.css — the guest screens and the error pages (PASS 6a, 2026-09-05)

   Loaded by components/layouts/guest.blade.php AFTER ui.css, whose tokens, type, buttons
   and fields it reuses. This file only ADDS `.ui-guest*` rules: the canvas with its two
   blooms, the brand line, ONE card, the phone layout (D7: the primary in the thumb zone).
   The old split screen with a marketing aside is gone: a second region carrying claims
   beside a form is the kind of decoration D8 removes.
   ========================================================================== */

/* ---- The canvas ---------------------------------------------------------- */
.ui-guest { position: relative; min-height: 100dvh; isolation: isolate; display: flex; flex-direction: column; }
.ui-guest::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 360px at 6% 4%, rgba(106, 77, 255, .16), transparent 60%),
    radial-gradient(520px 320px at 94% 2%, rgba(240, 86, 140, .12), transparent 60%);
}

/* ---- The brand line ---------------------------------------------------------- */
.ui-guest__top { padding: var(--ui-s5) var(--ui-s5) 0; }
.ui-guest__top-in { max-width: var(--ui-content); margin: 0 auto; display: flex; align-items: center; }
.ui-guest__brand { display: inline-flex; align-items: center; min-height: var(--ui-tap); margin: 0; }

/* ---- One card on the canvas ------------------------------------------------------ */
.ui-guest__main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ui-s6) var(--ui-s4) var(--ui-s8); }
.ui-guest__card { width: 100%; max-width: 28rem; padding: var(--ui-s6); }
/* 28rem is a form width. The two legal pages are long prose in the same card, and a measure of
   ~45 characters would make them unreadable, so they get a reading width instead (2026-09-05). */
.ui-guest__card:has(.ui-legal) { max-width: 44rem; }
.ui-guest__title { font: 600 1.75rem/1.15 var(--ui-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ui-guest__lead { margin-top: var(--ui-s2); color: var(--ui-ink-2); }
.ui-guest__lead + .ui-guest__lead { margin-top: var(--ui-s3); }

/* Status lines: what happened, in the product's voice; colour only for meaning. */
.ui-guest__status { display: block; margin-top: var(--ui-s4); padding: var(--ui-s3) var(--ui-s4); border-radius: 16px; background: var(--ui-surface-2); color: var(--ui-ink); font-size: var(--ui-fs-small); }
.ui-guest__status--good { background: var(--ui-good-soft); color: var(--ui-good); }
.ui-guest__status--bad { background: var(--ui-bad-soft); color: var(--ui-bad); }
.ui-guest__status--warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-guest__status .ui-linkbtn { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-inline: 0; }

/* A fact the visitor cannot change (the invited address). Text, not a disabled input. */
.ui-guest__meta { margin-top: var(--ui-s4); padding: var(--ui-s3) var(--ui-s4); border-radius: 16px; background: var(--ui-surface-2); }
.ui-guest__meta dt { font-size: var(--ui-fs-small); color: var(--ui-ink-2); font-weight: 500; }
.ui-guest__meta dd { font-weight: 600; overflow-wrap: anywhere; }

/* ---- The form ------------------------------------------------------------------------ */
.ui-guest__form { display: flex; flex-direction: column; margin-top: var(--ui-s5); }
.ui-guest__form .ui-field { margin: 0; }
.ui-guest__form .ui-field + .ui-field { margin-top: var(--ui-s4); }
.ui-guest__optional { font-weight: 400; color: var(--ui-ink-3); }
.ui-guest__fields2 { display: grid; gap: var(--ui-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ui-s4); }
.ui-guest__fields2 .ui-field + .ui-field { margin-top: 0; }
@media (max-width: 479px) { .ui-guest__fields2 { grid-template-columns: 1fr; } }

/* The password field and its show/hide control — a 44 px target inside the input. */
.ui-guest__affix { position: relative; }
.ui-guest__affix .ui-input { padding-inline-end: 52px; }
.ui-guest__eye { position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%); width: var(--ui-tap); height: var(--ui-tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ui-ink-2); }
.ui-guest__eye:hover { background: rgba(23, 20, 43, .06); color: var(--ui-ink); }

/* Remember-me beside «Mot de passe oublié ?» — one line, both targets tall. */
.ui-guest__row { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s3); flex-wrap: wrap; margin-top: var(--ui-s3); }

/* The activity choices stack in the card (the grid in ui.css is for the wide settings screen). */
.ui-guest__card .ui-choices { grid-template-columns: 1fr; }
.ui-guest__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---- Actions: ONE primary, full width; the way back beside it when there is one ---------- */
.ui-guest__actions { display: flex; flex-direction: column; gap: var(--ui-s2); margin-top: var(--ui-s5); }
.ui-guest__actions .ui-btn { width: 100%; }
.ui-guest__actions--row { flex-direction: row; flex-wrap: wrap; }
.ui-guest__actions--row .ui-btn { width: auto; flex: 0 0 auto; }
.ui-guest__actions--row .ui-btn--primary { flex: 1 1 auto; }

/* The quiet second path under the form. */
.ui-guest__foot { display: flex; justify-content: center; align-items: center; gap: var(--ui-s1); flex-wrap: wrap; margin-top: var(--ui-s4); color: var(--ui-ink-2); text-align: center; }

/* ---- D7: the phone is its own layout — the card fills the screen, the primary sits in the thumb zone ---- */
@media (max-width: 899px) {
  .ui-guest__top { padding: var(--ui-s4) var(--ui-s4) 0; }
  .ui-guest__main { justify-content: flex-start; padding: var(--ui-s4) var(--ui-s3) var(--ui-s5); }
  .ui-guest__card { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--ui-s5); }
  /* Livewire wraps every component view in ONE unstyled root <div>. Without this rule the flex
     chain from the card down to the form stops at that wrapper: the card fills the phone, the
     content stays hugged at the top, and the primary never reaches the thumb zone — the card
     just looks unfinished with a dead white area under it. Measured 2026-09-05: the «Se
     connecter» button sat at y=459 and «Envoyer le lien» at y=340 of 844. The error pages are
     NOT Livewire (plain children of the card), so they are untouched by this selector and keep
     their `--static` actions. */
  .ui-guest__card > [wire\:id] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .ui-guest__form { flex: 1 1 auto; }
  .ui-guest__actions { margin-top: auto; padding-top: var(--ui-s6); }
  .ui-guest__actions--static { margin-top: var(--ui-s5); padding-top: 0; }
}