/* Login v2 (DEV) — clear glass iPhone-style panel. Spec: DESIGN_NOTE_LOGIN_REGISTER_2026-10-11 */
:root { --lv2-orange: #ff7a1a; --lv2-green: #2ecc71; }
body.login-v2-on #login-overlay { opacity: 0 !important; pointer-events: none !important; }
body.login-v2-on .cinema-labels { display: none !important; }
#login-v2[hidden] { display: none !important; }
#login-v2 {
  position: fixed; z-index: 9000; top: 24px; bottom: 24px; left: 24px;
  width: min(430px, calc(100vw - 48px)); visibility: visible !important;
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: 46px; border: 2.5px solid rgba(255,255,255,.62);
  background: rgba(8,16,32,.40);
  backdrop-filter: blur(7px) saturate(1.2); -webkit-backdrop-filter: blur(7px) saturate(1.2);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.07), inset 0 0 0 7px rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; color: #fff;
  padding: 34px 28px 26px; box-sizing: border-box; overflow: hidden;
}
#login-v2::before { /* iPhone dynamic-island */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 14px; background: rgba(0,0,0,.55);
}
#login-v2 .lv2-mark { margin: 18px 0 0; text-align: center; font-weight: 200; font-size: 26px;
  letter-spacing: .42em; text-indent: .42em; color: #fff; white-space: nowrap; background: none; }
#login-v2 .lv2-mark small { font-size: .78em; letter-spacing: .12em; }
#login-v2 .lv2-mark--bottom { margin: 18px 0 4px; font-size: 20px; }
#login-v2 .lv2-centre { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
#login-v2 .lv2-centre p { margin: 0; text-align: center; font-weight: 300; font-size: 30px; line-height: 1.3;
  text-shadow: 0 2px 14px rgba(0,0,0,.35); transition: opacity .25s; }
#login-v2 .lv2-centre p.lv2-error { color: #ffb4a0; font-size: 24px; }
#login-v2 .lv2-controls { display: flex; flex-direction: column; gap: 14px; }
#login-v2 .login-input { all: unset; box-sizing: border-box; display: block !important; width: 100%; height: 56px;
  border-radius: 14px; padding: 0 18px; background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff; font: 300 18px "Montserrat", sans-serif;
  visibility: visible !important; position: static !important; opacity: 1 !important; }
#login-v2 .login-input::placeholder { color: rgba(255,255,255,.6); }
@keyframes lv2-pulse {
  0%,100% { border-color: rgba(255,122,26,.55); box-shadow: 0 0 0 0 rgba(255,122,26,.0); }
  50% { border-color: var(--lv2-orange); box-shadow: 0 0 14px 2px rgba(255,122,26,.55); }
}
#login-v2 .lv2-active { animation: lv2-pulse 1.8s ease-in-out infinite; border-color: var(--lv2-orange); }
#login-v2 .lv2-hold { position: relative; overflow: hidden; height: 100px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: rgba(255,255,255,.75);
  font: 500 23px "Montserrat", sans-serif; letter-spacing: .2em; text-align: center; user-select: none;
  -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  transition: background .4s, color .4s, transform .4s; }
#login-v2 .lv2-hold small { display: block; letter-spacing: .02em; font-weight: 300; font-size: 18px; margin-top: 4px; }
#login-v2 .lv2-hold[aria-disabled="true"] { cursor: default; }
@keyframes lv2-in { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
#login-v2 .lv2-hold.lv2-ready { background: rgba(46,204,113,.28); color: #fff; animation: lv2-in .45s ease-out, lv2-pulse 1.8s ease-in-out .45s infinite; border-color: var(--lv2-orange); }
#login-v2 .lv2-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(46,204,113,.85); pointer-events: none; }
#login-v2 .lv2-label { position: relative; }
/* Restored translucent glass sidebar (from styles.css .press-centered .login-card) behind the phone */
body.login-v2-on::after {
  content: ""; position: fixed; z-index: 8999; top: 0; bottom: 0; left: 0;
  width: min(calc(min(600px, calc(100vh - 48px)) * 0.4922 + 100px), 100vw); pointer-events: none;
  background: rgba(4,12,28,.40);
  border-right: 1px solid rgba(180,220,255,.22);
  box-shadow: .75rem 0 3rem rgba(0,0,0,.35);
  backdrop-filter: blur(1.15rem) saturate(1.2); -webkit-backdrop-filter: blur(1.15rem) saturate(1.2);
  animation: marina-glass-pulse 10.04s ease-in-out infinite;
}
@media (max-width: 600px) {
  body.login-v2-on::after { display: none; }
  #login-v2 { top: 0; bottom: 0; left: 0; right: 0; width: auto; border-radius: 0; border: 0; padding-top: 30px; }
  #login-v2::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { #login-v2 .lv2-active, #login-v2 .lv2-hold.lv2-ready { animation: none; } }

/* Desktop: fixed phone proportions; only the glass panel around it flexes on zoom/resize */
@media (min-width: 601px) {
  #login-v2 { top: 50%; bottom: auto; left: 131px; transform: translateY(-50%);
    height: min(600px, calc(100vh - 48px)); width: auto; aspect-ratio: 9 / 19.5; padding: 30px 22px 22px; }
}

/* FINAL (2026-10-11): match LOCKED_1/2 — dark iPhone bezel, status bar, teal/purple screen, mock-scale type */
@media (min-width: 601px) {
  #login-v2 { --ph: min(600px, calc(100vh - 48px)); height: var(--ph); width: calc(var(--ph) * 0.4922); aspect-ratio: auto;
    left: 50px;
    border-radius: calc(var(--ph) * 0.083); border: calc(var(--ph) * 0.012) solid #0b0c0f;
    outline: 2px solid #4a4d55; outline-offset: 0;
    background:
      radial-gradient(ellipse 70% 40% at 25% 22%, rgba(40,150,140,.55), transparent 70%),
      radial-gradient(ellipse 60% 45% at 80% 48%, rgba(120,50,170,.6), transparent 72%),
      radial-gradient(ellipse 70% 35% at 45% 80%, rgba(45,75,170,.55), transparent 75%),
      linear-gradient(180deg, #18324a 0%, #1d2a52 50%, #1b2560 100%);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 0 0 4px #2a2c31, 0 18px 50px rgba(0,0,0,.55);
    padding: calc(var(--ph) * 0.045) calc(var(--ph) * 0.045) 0; }
  #login-v2::before { top: calc(var(--ph) * 0.012); width: calc(var(--ph) * 0.123); height: calc(var(--ph) * 0.036);
    border-radius: 99px; background: #000; }
  #login-v2 .lv2-status { position: absolute; top: calc(var(--ph) * 0.02); left: calc(var(--ph) * 0.06); right: calc(var(--ph) * 0.06);
    display: flex; justify-content: space-between; font: 600 calc(var(--ph) * 0.0145) -apple-system, "Helvetica Neue", Arial, sans-serif; color: #fff; }
  #login-v2 .lv2-status span:last-child { font-size: calc(var(--ph) * 0.013); letter-spacing: .02em; }
  #login-v2 .lv2-status i { display: inline-block; width: 3px; height: 8px; background: #fff; border-radius: 1px; vertical-align: -1px; }
  #login-v2 .lv2-mark { margin: calc(var(--ph) * 0.045) 0 0; font-weight: 300; font-size: calc(var(--ph) * 0.025);
    letter-spacing: .5em; text-indent: .5em; }
  #login-v2 .lv2-mark small { font-size: 1em; letter-spacing: .05em; }
  /* SCRAP ANGEL AI: fills the band between hold-box bottom and inner screen bottom; text centred in it */
  #login-v2 .lv2-mark--bottom { flex: 0 0 calc(var(--ph) * 0.075); margin: 0; display: flex; align-items: center; justify-content: center;
    line-height: 1; font-size: calc(var(--ph) * 0.019); letter-spacing: .38em; text-indent: .38em; position: static; top: auto;
    padding-top: calc(var(--ph) * 0.0023); box-sizing: border-box; /* compensates font ascent/descent so glyph box is centred */ }
  #login-v2 .lv2-centre { align-items: flex-start; padding-top: calc(var(--ph) * 0.12); }
  #login-v2 .lv2-centre p { font-size: calc(var(--ph) * 0.0285); line-height: 1.38; font-weight: 300; }
  #login-v2 .lv2-centre p.lv2-error { font-size: calc(var(--ph) * 0.024); }
  #login-v2 .lv2-controls { gap: calc(var(--ph) * 0.0145); }
  #login-v2 .login-input { height: calc(var(--ph) * 0.054); border-radius: calc(var(--ph) * 0.0115); padding: 0 calc(var(--ph) * 0.018);
    background: rgba(255,255,255,.10) !important; border-width: 1.5px; font-size: calc(var(--ph) * 0.0165); }
  #login-v2 .lv2-hold { height: calc(var(--ph) * 0.07); border-radius: calc(var(--ph) * 0.0115); display: flex; align-items: center; justify-content: center;
    font: 700 calc(var(--ph) * 0.0135) "Montserrat", sans-serif; letter-spacing: .2em; }
  #login-v2 .lv2-hold small { font-size: calc(var(--ph) * 0.0115); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
  #login-v2 .lv2-fill { background: rgba(98,200,120,.92); }
  #login-v2 .lv2-hold .lv2-label, #login-v2 .lv2-hold .lv2-label small { color: #fff !important; opacity: 1 !important; } #login-v2 .lv2-hold .lv2-label { font-weight: 700 !important; }
  #login-v2 .lv2-hold.lv2-ready { background: rgba(40,70,150,.35); }
}
#login-v2 .lv2-homebar { display: none !important; } /* never a white bar at the bottom of the phone */
/* EXPLORATORY (2026-10-11 23:49): fixed centre-text frame sized for the LONGEST string (TEXT_HOLD), dev outline visible */
@media (min-width: 601px) {
  #login-v2 .lv2-centre { flex: 1 1 auto; align-items: flex-start; }
  #login-v2 .lv2-centre p { box-sizing: border-box; width: 100%; height: calc(var(--ph) * 0.185); padding: calc(var(--ph) * 0.01) calc(var(--ph) * 0.008);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-size: calc(var(--ph) * 0.031); line-height: 1.32; }
}
/* APPROVED centre-text style (2026-10-11 23:51, ref CENTRE_TEXT_MAX_SIZE_FONT_EXAMPLE): Montserrat ExtraLight 200 (local @font-face in styles.css) */
@media (min-width: 601px) {
  #login-v2 .lv2-centre p, #login-v2 .lv2-centre p.lv2-error { font-family: "Montserrat", sans-serif; font-weight: 200; font-synthesis: none;
    line-height: 1.15; letter-spacing: .01em; font-size: var(--lv2-centre-fs, calc(var(--ph) * 0.0305)); } /* target +40% = 0.0434 (26px) does not fit the hold text in 227.3x111; 0.0305 (18.3px) is the largest that fits */
}
/* FRAME277 (2026-10-11 23:54): centre-text frame 227.3 x 277 @600 (0.4617*ph), sits as low as possible, ~16px (0.0267*ph) clear above email */
@media (min-width: 601px) {
  #login-v2 .lv2-centre { align-items: flex-end; padding-top: 0; padding-bottom: calc(var(--ph) * 0.0267); }
  #login-v2 .lv2-centre p { height: calc(var(--ph) * 0.46167); }
}
/* FRAME277 size: largest that fits the hold text in 227.3x277, searched at 0.1px = 27.2px @600 */
/* OVERRIDE 23:55: size/spacing derived from CENTRE_TEXT_MAX_SIZE_FONT_EXAMPLE (413px wide == 227.3px frame): 29.5px @600, lh 1.08, ls .01em, weight 200 */
@media (min-width: 601px) {
  #login-v2 { --lv2-centre-fs: calc(var(--ph) * 0.049167); }
  #login-v2 .lv2-centre p, #login-v2 .lv2-centre p.lv2-error { line-height: 1.08; letter-spacing: .01em; overflow: visible;
    height: var(--lv2-frame-h, calc(var(--ph) * 0.46167)); }
}
/* Frame grows to fit the longest (hold) text at 29.5px: 9 lines x 31.86 + 12 pad = 303px @600 (0.505*ph).
   Centred exactly between MARINA and the email field via auto margins (stays centred if height changes). */
@media (min-width: 601px) {
  #login-v2 { --lv2-frame-h: calc(var(--ph) * 0.505); }
  #login-v2 .lv2-centre { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0; }
  #login-v2 .lv2-centre p { margin: auto 0; flex: 0 0 auto; }
  #login-v2 .lv2-mark:not(.lv2-mark--bottom) { margin-bottom: 0; }
  #login-v2 .lv2-controls { margin-top: 0; }
}
/* LINEBREAK (2026-10-12 00:06): largest size where no centre-text line is a single word = 18.7px @600 */
@media (min-width: 601px) { #login-v2 { --lv2-centre-fs: calc(var(--ph) * 0.041667); } }