/* FA-02 — login (#scr-login) and lock (#scr-lock) restyle: full-bleed
   welcome-art background (falls back to the solid palette page color while
   the picture loads or if it 404s — see frontend/js/welcomeArtV2.js) behind
   a card holding the existing PIN/unlock controls. Pure restyle: every id
   style.css/JS already binds to (#pin, #login-err, #btn-login, #btn-lock-*,
   #lock-status) keeps its id and its listener; only new wrapper elements
   and classes are added. Board 27 / BUILD_INSTRUCTIONS §8.

   Two new elements added to index.html per screen: .v2-scenic-bg (starts
   class="hidden" — the existing global utility — so it is inert with the
   switch OFF) and .v2-card (starts as `display:contents`, i.e. NO box at
   all with the switch off, so #pin/#login-err/#btn-login stay direct flex
   children of #scr-login exactly as in v1 and test 4's pixel parity holds).
   Only [data-look="v2"] rules give either one real layout. */

.v2-card { display: contents; }

[data-look="v2"] #scr-login,
[data-look="v2"] #scr-lock {
  position: relative;
  overflow: hidden;
  background-color: var(--field-page);
}

[data-look="v2"] #scr-login > img,
[data-look="v2"] #scr-login > h1,
[data-look="v2"] #scr-lock > img,
[data-look="v2"] #scr-lock > h1,
[data-look="v2"] .v2-card {
  position: relative;
  z-index: 1;
}

[data-look="v2"] .v2-scenic-bg.hidden {
  /* overrides the global .hidden utility only inside v2 — JS never has to
     race CSS to reveal this; the picture itself still only appears once
     welcomeArtV2.js sets a background-image (solid palette color until then). */
  display: block;
}
[data-look="v2"] .v2-scenic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--field-page);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[data-look="v2"] .v2-scenic-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* scrim so text/card stay readable over a bright picture (artwork rules,
     BUILD_INSTRUCTIONS §9) — page-colored, not an arbitrary black tint, so
     it stays correct across all three palettes */
  background: linear-gradient(to bottom, transparent, var(--field-page) 88%);
}
@media (prefers-reduced-motion: no-preference) {
  [data-look="v2"] .v2-scenic-bg { transition: background-image 400ms ease; }
}

[data-look="v2"] .v2-card {
  display: flex;
  flex-direction: column;
  gap: var(--field-space-3);
  width: 100%;
  max-width: 400px;
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  padding: var(--field-space-4);
}

[data-look="v2"] #pin {
  -webkit-text-security: disc;
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 0.7rem;
  max-width: none;
  width: 100%;
  min-height: 48px;
  border-radius: var(--field-radius-control);
  border: 1px solid var(--field-border);
  background: var(--field-page);
  color: var(--field-text-primary);
}
[data-look="v2"] #pin::placeholder { letter-spacing: normal; font-size: 1rem; }

[data-look="v2"] #scr-login .btn-primary,
[data-look="v2"] #scr-lock .btn-primary {
  max-width: none;
  width: 100%;
  min-height: 48px;
  border-radius: var(--field-radius-control);
}

[data-look="v2"] .v2-link-btn {
  background: none;
  border: none;
  color: var(--field-text-secondary);
  font: var(--field-text-meta);
  text-decoration: underline;
  padding: var(--field-space-2);
  cursor: pointer;
}

[data-look="v2"] #lock-status { color: var(--field-text-secondary); }