/* ══════════════════════════════════════════════════════════════════
   login.css  —  Factory IoT Authentication UI
   Loaded after factory-base.css (which supplies design tokens).
   ══════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────── */
html {
  height: 100%;
}
body {
  /* dvh tracks the dynamic viewport so Safari's collapsing toolbar
     doesn't cause the lock to clip behind it.  vh is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* ── Stage: portrait vertical stack ─────────────────────────────── */
#stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 32px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Long-press on iOS opens a text-selection/lookup callout on any element
   without this — Android already suppresses it by default, iPhone does not. */
#stage * {
  -webkit-touch-callout: none;
}

/* Inputs need normal selection/callout behavior back so typing, cursor
   placement, and password-manager paste still work as expected. */
.login-input {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ── Hero section (lock + brand) ─────────────────────────────────── */
#login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* ── Form side ───────────────────────────────────────────────────── */
#login-form-side {
  width: 100%;
}

/* ── Lock wrap ───────────────────────────────────────────────────── */
#lock-wrap {
  position: relative;
  /* fluid: 80px on small phones, 120px on desktop, follows vmin */
  width:  clamp(80px, 20vmin, 120px);
  height: clamp(80px, 20vmin, 120px);
  cursor: pointer;
  margin-bottom: 16px;
  flex-shrink: 0;
  touch-action: manipulation;
}
#lock-wrap svg { width: 100%; height: 100%; overflow: visible; }

/* Shackle */
.shackle {
  fill: none; stroke: var(--text); stroke-width: 8;
  stroke-linecap: round;
  transform-origin: 50% 68px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), stroke .3s;
}

/* Body */
.lock-body {
  fill: var(--surface2); stroke: var(--text); stroke-width: 3;
  transition: fill .3s, stroke .3s;
}

/* Keyhole */
.keyhole {
  fill: var(--text-dim);
  transition: fill .3s, transform .4s;
  transform-origin: 60px 74px;
}

/* Unlocked state */
#lock-wrap.unlocked .shackle   { transform: rotate(35deg) translateY(-6px); stroke: var(--green); }
#lock-wrap.unlocked .lock-body { stroke: var(--green); fill: var(--green-dim); }
#lock-wrap.unlocked .keyhole   { fill: var(--green); transform: rotate(25deg); }

/* Error shake */
#lock-wrap.shake .shackle { animation: shackle-shake .5s ease; }
@keyframes shackle-shake {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-12deg); }
  35%     { transform: rotate(12deg); }
  55%     { transform: rotate(-8deg); }
  75%     { transform: rotate(8deg); }
  90%     { transform: rotate(-3deg); }
}

/* ── Brand / logo ────────────────────────────────────────────────── */
#brand {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 6px;
}
#logo-img {
  max-width: 120px; max-height: 40px;
  object-fit: contain; display: none; margin-bottom: 6px;
}

/* ── Tap hint ────────────────────────────────────────────────────── */
#tap-hint {
  font-size: 15px; color: var(--text-dim); margin-bottom: 20px;
  transition: opacity .3s;
}

/* ── Form card (slides up) ───────────────────────────────────────── */
#form-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: 20px;
  padding: 24px 20px 20px;
  transform: translateY(40px); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.32,.72,0,1), opacity .35s ease;
  display: flex; flex-direction: column; gap: 12px;
}
#form-card.visible {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}

/* ── Sub-views ───────────────────────────────────────────────────── */
.sub-view { display: none; flex-direction: column; gap: 12px; }
.sub-view.active { display: flex; }

/* ── Inputs ──────────────────────────────────────────────────────── */
.login-input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text);
  /* 16px minimum prevents iOS from zooming on focus */
  font-size: max(16px, 1rem);
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.login-input:focus { border-color: var(--amber-dim); }
.login-input::placeholder { color: var(--text-dim); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  width: 100%; padding: 14px;
  background: var(--amber); color: #000;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .1s;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.btn-primary:active  { transform: scale(.97); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn-ghost {
  width: 100%; padding: 10px;
  background: none; color: var(--text-dim);
  border: none; border-radius: 10px;
  font-size: 13px; cursor: pointer;
  transition: color .15s;
  touch-action: manipulation;
}
.btn-ghost:hover { color: var(--text); }

.btn-secondary {
  width: 100%; padding: 11px;
  background: var(--surface2); color: var(--text-mid);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.btn-secondary:active { background: var(--surface3); }

/* ── Feedback messages ───────────────────────────────────────────── */
.msg-error {
  font-size: 13px; color: var(--red); text-align: center;
  background: var(--red-dim); border-radius: 8px;
  padding: 8px 12px; display: none;
}
.msg-error.show { display: block; }
.msg-success {
  font-size: 13px; color: var(--green); text-align: center;
  background: var(--green-dim); border-radius: 8px;
  padding: 8px 12px; display: none;
}
.msg-success.show { display: block; }
.msg-pending {
  font-size: 13px; color: var(--amber); text-align: center;
  background: var(--amber-glow); border-radius: 8px;
  padding: 10px 12px; display: none;
}
.msg-pending.show { display: block; }
.msg-pending .btn-secondary:disabled { opacity: .55; cursor: not-allowed; }

/* ── Passkey hidden ──────────────────────────────────────────────── */
.passkey-hidden { display: none !important; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Password strength bar ───────────────────────────────────────── */
.pw-strength { height: 3px; border-radius: 2px; background: var(--surface3); overflow: hidden; }
.pw-strength-fill { height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s; }

/* ── Card titles ─────────────────────────────────────────────────── */
.card-title {
  font-size: 16px; font-weight: 700; text-align: center;
  color: var(--text); margin-bottom: 4px;
}
.card-sub {
  font-size: 12px; color: var(--text-dim); text-align: center;
  margin-bottom: 4px;
}

/* ── Attempt counter ─────────────────────────────────────────────── */
#attempt-info { font-size: 11px; color: var(--text-dim); text-align: center; }

/* ── Unlock flash ────────────────────────────────────────────────── */
@keyframes unlock-flash {
  0%   { background: var(--bg); }
  40%  { background: rgba(39,200,122,.08); }
  100% { background: var(--bg); }
}
body.unlocking { animation: unlock-flash .7s ease forwards; }

/* ══════════════════════════════════════════════════════════════════
   GAME OVERLAY
   Lives at body level so position:fixed always covers full viewport.
   ══════════════════════════════════════════════════════════════════ */
#viewGame.active {
  position: fixed !important;
  inset: 0;
  z-index: 100;
  background: var(--bg, #0d0d12);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0; gap: 0;
}
.game-exit-bar {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px 2px; box-sizing: border-box; flex-shrink: 0;
}
#game-pad {
  display: none;
  width: 100%; max-width: 500px; box-sizing: border-box;
  padding: 12px 20px 56px;
  align-items: center; justify-content: space-between;
  margin-top: auto; flex-shrink: 0;
}
#viewGame.active #game-pad { display: flex; }
.gp-dpad { display: flex; gap: 12px; }
.gp-btn {
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-size: 26px; color: var(--text-dim);
  cursor: pointer; touch-action: none; user-select: none;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s;
}
.gp-btn:active {
  background: rgba(255,255,255,0.2);
  border-color: var(--amber, #f5a623);
  transform: scale(0.91);
}
.gp-fire {
  width: 80px; height: 80px;
  background: rgba(231,76,60,0.12);
  border-color: rgba(231,76,60,0.35);
  color: #e74c3c; font-size: 30px;
}
.gp-fire:active { background: rgba(231,76,60,0.3); border-color: #e74c3c; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════ */

/* ── Very narrow phones (< 390px) ───────────────────────────────── */
@media (max-width: 389px) {
  #stage    { padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .card-title { font-size: 15px; }
}

/* ── Landscape + short viewport (phones + small tablets landscape) ─
   Triggers when height < 600px regardless of width.
   Switches to a two-column layout: hero left, form right.          */
@media (orientation: landscape) and (max-height: 599px) {
  body {
    align-items: flex-start;
    padding: max(env(safe-area-inset-top, 0px), 8px) 0
             max(env(safe-area-inset-bottom, 0px), 8px);
  }

  #stage {
    flex-direction: row;
    align-items: flex-start;
    max-width: min(760px, 100%);
    padding: 12px max(env(safe-area-inset-right, 0px), 20px)
             12px  max(env(safe-area-inset-left,  0px), 20px);
    gap: 24px;
  }

  #login-hero {
    /* Fixed-width column for the lock + brand; scales with vw */
    width: clamp(90px, 20vw, 150px);
    flex-shrink: 0;
    padding-top: 6px;
  }

  #lock-wrap {
    width:  clamp(56px, 13vw, 90px);
    height: clamp(56px, 13vw, 90px);
    margin-bottom: 10px;
  }

  #brand    { font-size: 10px; }
  #tap-hint { font-size: 12px; margin-bottom: 8px; }

  /* Form side fills remaining width; scroll if content is taller than viewport */
  #login-form-side {
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #form-card { border-radius: 16px; }
}

/* ── Large landscape tablets (≥ 900px wide, ≥ 600px tall) ──────────
   iPad and above in landscape: roomy two-column layout.            */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  #stage {
    flex-direction: row;
    align-items: center;
    max-width: 820px;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  }

  #login-hero {
    flex: 0 0 220px;
  }

  #lock-wrap {
    width: 130px;
    height: 130px;
    margin-bottom: 18px;
  }

  #login-form-side { flex: 1; min-width: 0; }
}

/* ── Accessibility: prefers-reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shackle, .keyhole, .lock-body,
  #form-card { transition: none; }
  body.unlocking,
  #lock-wrap.shake .shackle { animation: none; }
}