/*
 * Sign in pages (Stage 1b, docs/design/lift-login-plan.md): the lift lobby and the sign in card.
 * Loaded only by layouts/guest.blade.php, after app.css. No inline styles: positions that change (the cabin, the zoom)
 * are set by public/js/lobby.js through the browser's style API, which the Content-Security-Policy allows.
 *
 * The sign in card is adapted from "Login Form" by SpectacledCoder (codepen.io/SpectacledCoder/pen/oNRpebG) and the lift
 * from "Elevator" by Arthur Annibal (codepen.io/nibalAn/pen/prWdjq), both MIT License. Licence texts: docs/THIRD_PARTY_LICENSES.md.
 * No credit is shown on the page. Changes: no online fonts, icons or images; company logo; right to left; phone sizes.
 */

/* ---- The sign in pages are always light (the owner's decision, 2026-10-27) ------------------------------- */
.auth {
  color-scheme: light;
  --ink: #1b1f23; --ink-soft: #565f68; --line: rgba(30, 35, 70, 0.1); --input: #fff;
  --ok: #1e7a3d; --ok-bg: rgba(60, 180, 110, 0.15); --danger: #b3261e; --danger-bg: rgba(230, 70, 60, 0.13);
  --card: #fff; --tick-border: rgba(27, 31, 35, .32);
  --orange: orange; --orange-text: #b35900; --card-bg: #fff; --card-shadow: rgb(228, 228, 228); --input-line: rgba(0, 0, 0, 0.26);
  position: relative; min-block-size: 100vh; color: var(--ink);
  background: linear-gradient(155deg, #faf3e6 0%, #eef1fb 52%, #f1e9f8 100%);
}
/* Stronger than app.css's dark mode link colour, because these pages stay light. */
html body .auth a:not(.fill-button):not(.btn):not(.brand), html body .auth .login-links button { color: var(--orange-text); }

/* Language choice, in the top corner of every sign in page */
.auth-tools { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 30; }
.auth-tools .lang-switch button { background: rgba(255, 255, 255, 0.85); color: var(--ink); border-color: rgba(0, 0, 0, 0.15); min-block-size: 36px; }
.auth-tools .lang-switch button[aria-current="true"] { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ---- Lobby: the lift interior picture with working parts laid over it -------------------------------------
   The stage keeps the picture's shape (1376 x 768). It covers the screen on wide screens; on narrow screens it is
   cropped to the panel and building (x 405 to 1025 of the picture) and fades into the wall colour above and below.
   Every overlay is placed in percent of the picture, and text sizes use cqw (percent of the stage width). */
.lobby {
  position: relative; overflow: hidden; min-block-size: 100vh;
  background: radial-gradient(ellipse at center, #b4a283, #7d6e57);
}
.stage {
  --w: min(max(100vw, calc(100vh * 1.7917)), calc(100vw * 2.2));
  position: absolute; inline-size: var(--w); aspect-ratio: 1376 / 768; left: calc(50% - var(--w) * 0.52); top: 50%;
  transform: translateY(-50%); container-type: inline-size; direction: ltr;   /* the picture does not mirror in Arabic */
  background: url("../images/lobby/lift-interior.jpg") center / 100% 100% no-repeat;
}
/* The lobby picture dims a little in dark mode (the sign in card itself stays light). */
:root[data-theme="dark"] .stage { filter: brightness(0.82); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage { filter: brightness(0.82); } }
@media (max-aspect-ratio: 1/1) {
  .stage { -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
}

/* The display, on the picture's dark screen (x 427, y 168, 220 x 84) */
.screen {
  position: absolute; left: 31.03%; top: 21.875%; width: 15.99%; height: 10.94%;
  display: flex; align-items: center; gap: 0.9cqw; padding: 0 1.1cqw; overflow: hidden; border-radius: 0.4cqw;
  font: 600 1.25cqw/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #7dff8a;
  text-shadow: 0 0 0.5cqw rgba(80, 255, 120, 0.7);
}
[dir="rtl"] .screen { direction: rtl; font-family: Tahoma, "Noto Sans Arabic", sans-serif; }
.screen-text { display: flex; flex-direction: column; min-inline-size: 0; }
.screen-arrow { flex: none; inline-size: 2.2cqw; text-align: center; font-size: 2.4cqw; line-height: 1; }
.screen-arrow:empty { display: none; }
.screen[data-dir] .screen-arrow { color: #ffc23d; text-shadow: 0 0 0.6cqw rgba(255, 194, 61, 0.8); animation: lobby-pulse 0.8s ease-in-out infinite; }
@keyframes lobby-pulse { 50% { opacity: 0.35; } }

/* The floor buttons, on the picture's round buttons (66 px wide, centres measured on the picture) */
.keys { position: absolute; inset: 0; pointer-events: none; }
.btn-floor {
  position: absolute; width: 4.8%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: auto;
  border: 0; padding: 0; background: transparent; cursor: pointer; font: 600 1.7cqw/1 -apple-system, "Segoe UI", sans-serif;
  color: #2f3236; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); transition: box-shadow 0.2s, color 0.2s;
}
.btn-floor[data-floor="5"] { left: 35.10%; top: 39.84%; }
.btn-floor[data-floor="6"] { left: 43.02%; top: 39.84%; }
.btn-floor[data-floor="3"] { left: 35.10%; top: 51.56%; }
.btn-floor[data-floor="4"] { left: 43.02%; top: 51.56%; }
.btn-floor[data-floor="1"] { left: 35.10%; top: 63.28%; }
.btn-floor[data-floor="2"] { left: 43.02%; top: 63.28%; }
.btn-floor[data-floor="0"] { left: 39.06%; top: 74.87%; }
.btn-floor::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* a slightly larger tap area on phones */
.btn-floor:hover { box-shadow: 0 0 0 0.25cqw rgba(125, 255, 138, 0.6); }
.btn-floor:focus-visible { outline: 0.25cqw solid #7dff8a; outline-offset: 0.3cqw; }
.btn-floor.active { color: #0a5c12; box-shadow: 0 0 0 0.3cqw #7dff8a, 0 0 1.4cqw #7dff8a; text-shadow: 0 0 0.6cqw #7dff8a; }

/* The turquoise shaft of the model building (x 812, y 144, 96 x 500); the cabin rides inside it */
.shaft { position: absolute; left: 59.01%; top: 18.75%; width: 6.98%; height: 65.1%; }
.cabin {
  position: absolute; left: 50%; bottom: 1%; width: 56%; height: 12%; transform: translateX(-50%);
  background: #fff; border: 0.18cqw solid #333; border-top-width: 0.45cqw; overflow: hidden; box-shadow: 0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.3);
}
.cabin-logo { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.cabin-door {
  position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 1;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 21%),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 21%),
    radial-gradient(circle farthest-corner at center, grey, #8a8a8a);
  background-size: 5px 5px, 5px 5px, 100% 100%; background-position: 1px 1px, 0 0, center center;
  transition: width 0.55s linear;
}
.cabin.is-open .cabin-door { width: 0; }
/* The small light on top of the cabin: off while waiting, blinking amber while travelling, green only when the door
   opens; if the lift stops at a floor with nothing, it stays amber (steady). */
.cabin-light {
  position: absolute; top: 2%; left: 50%; z-index: 2; width: 14%; aspect-ratio: 1; margin-left: -7%; border-radius: 50%;
  background: #8d9399; border: 1px solid rgba(0, 0, 0, 0.5); transition: background 0.3s, box-shadow 0.3s;
}
.cabin.in-transit .cabin-light { background: #ffb020; box-shadow: 0 0 6px #ffb020; animation: lobby-pulse 0.5s infinite; }
.cabin.stopped-shut .cabin-light { background: #ffb020; box-shadow: 0 0 6px #ffb020; }
.cabin.arrived .cabin-light { background: #3dff6e; box-shadow: 0 0 7px #3dff6e; }

/* ---- The sign in card: the "Login Form" template -------------------------------------------------------- */
.auth-page {
  position: relative; isolation: isolate;
  min-block-size: 100vh; display: flex; align-items: center; justify-content: center; padding: 72px 16px 32px;
}
/* Behind the card: the company's sign in picture (or the lift), blurred and faded when it was uploaded, so the browser
   has nothing heavy to redraw. Pinned to the screen, so it lines up exactly with the zoom's last frame. */
.auth-backdrop {
  position: fixed; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none;
  background: #f6f4f0;
}
/* The page behind the sign in pages is light too, so a phone that scrolls a little never shows a dark edge. */
html:has(.auth), html:has(.auth) body { background: #f6f4f0; }
/* Anything marked hidden stays hidden on the sign in pages, even parts given a display above (the card waits behind
   the lift this way). no-js.css still shows the card without JavaScript: its #auth-page rule is stronger. */
.auth [hidden] { display: none !important; }
.login-card {
  display: flex; align-items: center; inline-size: 520px; max-inline-size: 100%; min-block-size: 400px;
  background: var(--card-bg); box-shadow: 1px 1px 20px var(--card-shadow); border-radius: 25px;
}
.square {
  flex: none; display: flex; align-items: center; justify-content: center; inline-size: 200px; block-size: 200px; padding: 14px;
  margin-inline-start: -50px; background: var(--orange); box-shadow: 1px 1px 20px var(--orange); border-radius: 25px; z-index: 2;
}
.square h1 { margin: 0; color: #fff; text-align: center; font-size: 2rem; line-height: 1.15; overflow-wrap: anywhere; }
.square--long h1 { font-size: 1.35rem; }
.card-body { display: flex; flex-direction: column; inline-size: 52%; margin: 28px auto; min-inline-size: 0; }
.form-logo { display: block; align-self: center; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 90px; margin-block-end: 8px; object-fit: contain; }
.form-logo.is-waiting { visibility: hidden; }   /* hidden while the flying logo travels to this spot */
.login-sub { margin: 0 0 14px; text-align: center; color: var(--ink-soft); font-size: 0.85rem; }
.card-intro { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.88rem; }
.card-body form { display: flex; flex-direction: column; }
.card-body .alert { margin-block: 0 12px; font-size: 0.88rem; }
.auth-field { display: flex; flex-direction: column; margin-block-end: 14px; }
.auth-field label { margin-block-end: 6px; font-size: 0.95rem; }
.auth-field .help { margin-block-start: 4px; color: var(--ink-soft); font-size: 0.78rem; }
.auth-field .error { margin-block-start: 4px; color: var(--danger); font-size: 0.82rem; }
.login-input {
  all: unset; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 40px; padding-block-end: 5px;
  border-block-end: 1px solid var(--input-line); font-size: 1rem; color: var(--ink); transition: border-color 0.2s;
}
.login-input:focus { border-block-end-color: var(--orange); }
.login-input.is-invalid { border-block-end-color: var(--danger); }
.login-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important; -webkit-text-fill-color: var(--ink); }
.login-password { display: flex; align-items: center; }
.eye { flex: none; inline-size: 44px; block-size: 44px; border: 0; background: none; cursor: pointer; color: #fd7e14; border-radius: 8px; padding: 0; }
.eye svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.eye[aria-pressed="true"] { opacity: 0.55; }
.eye:focus-visible { outline: 2px solid var(--orange); }
.login-check { display: flex; gap: 8px; align-items: center; min-block-size: 44px; font-size: 0.85rem; }
.login-check input { inline-size: 18px; block-size: 18px; accent-color: var(--orange); }
.card-note { margin: 4px 0 10px; color: var(--ink-soft); font-size: 0.82rem; }

/* The template's hover fill button: an orange bar grows to fill it */
.fill-button {
  position: relative; overflow: hidden; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 120px; padding-inline: 20px; white-space: nowrap; min-block-size: 44px; margin-block-start: 10px;
  border-radius: 5px; border: 1px solid var(--orange); background: var(--card-bg); color: var(--ink);
  font: inherit; font-size: 1.1rem; text-decoration: none; cursor: pointer; transition: box-shadow 1s;
}
.fill-button::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 1px; background: var(--orange);
  visibility: hidden; transition: all 0.5s;
}
.fill-button span { position: relative; transition: color 0.3s; }
.fill-button:hover, .fill-button:focus-visible { box-shadow: 1px 1px 20px var(--orange); outline: none; }
.fill-button:hover::before, .fill-button:focus-visible::before { visibility: visible; inset-block-start: 0; block-size: 100%; }
.fill-button:hover span, .fill-button:focus-visible span { color: #fff; }
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-block-start: 12px; }
.login-links a, .login-links button {
  font: inherit; font-size: 0.82rem; color: var(--orange-text); background: none; border: 0; padding: 10px 0; min-block-size: 44px; cursor: pointer; text-decoration: underline;
}
.card-body .qr { align-self: center; max-inline-size: 100%; }
.card-body .qr svg { max-inline-size: 100%; block-size: auto; }
.card-body .codes { columns: 2; padding-inline-start: 18px; font-family: ui-monospace, Menlo, monospace; }
.card-body code { overflow-wrap: anywhere; }

/* ---- Zoom: the open cabin grows to fill the screen, the logo then glides to the top of the form ---------- */
.zoom, .flying-logo { position: fixed; z-index: 50; pointer-events: none; }
.zoom { background: #fff; border: 3px solid #333; border-top-width: 10px; }
.zoom.is-full { border-width: 0; }
/* Inside the zoom: white like the cabin while it grows, then softly turning into the same picture as the card page,
   so handing over to the page changes nothing on screen (the mockup's seamless zoom, 2026-10-28). */
.zoom-backdrop {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease;
}
.zoom.is-full .zoom-backdrop { opacity: 1; transition: opacity 0.45s ease 0.45s; }
.zoom.is-fading { opacity: 0; }
.flying-logo { object-fit: contain; }
.zoom.is-moving, .flying-logo.is-moving {
  transition: left 0.9s cubic-bezier(0.65, 0, 0.35, 1), top 0.9s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1),
              border-width 0.9s, opacity 0.6s ease;
}

/* ---- Phones and small tablets: the square sits on top of the card ---------------------------------------- */
@media (max-width: 700px) {
  .auth-page { padding-block-start: 84px; }
  .login-card { flex-direction: column; inline-size: min(92%, 420px); min-block-size: 0; padding-block-end: 8px; }
  .square { inline-size: 150px; block-size: 150px; margin-inline-start: 0; margin-block-start: -50px; }
  .square h1 { font-size: 1.6rem; }
  .square--long h1 { font-size: 1.15rem; }
  .card-body { inline-size: 86%; margin-block: 18px 10px; }
}

/* ---- Reduce Motion ------------------------------------------------------------------------------------------
   app.css switches every transition and animation off when a device asks for less motion. On the sign in pages the
   lift's own movements still play (the owner's decision, 2026-10-27: the ride is the point of the page); everything
   else in the app keeps following the device setting. */
@media (prefers-reduced-motion: reduce) {
  .auth .cabin-door { transition: width 0.55s linear !important; }
  .auth .cabin-light { transition: background 0.3s, box-shadow 0.3s !important; }
  .auth .btn-floor { transition: box-shadow 0.2s, color 0.2s !important; }
  .zoom.is-moving, .flying-logo.is-moving {
    transition: left 0.9s cubic-bezier(0.65, 0, 0.35, 1), top 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1),
                border-width 0.9s, opacity 0.6s ease !important;
  }
  .zoom .zoom-backdrop { transition: opacity 0.4s ease !important; }
  .zoom.is-full .zoom-backdrop { transition: opacity 0.45s ease 0.45s !important; }
  .auth .screen[data-dir] .screen-arrow { animation: lobby-pulse 0.8s ease-in-out infinite !important; }
  .auth .cabin.in-transit .cabin-light { animation: lobby-pulse 0.5s infinite !important; }
}

/* Jump to a starting position without animating (must stay last, so it wins over the rules above). */
.zoom.snap, .zoom.snap .zoom-backdrop, .flying-logo.snap { transition: none !important; }