/* playekoloko.com/login/ on phones, 2026-10-28. Loaded after home3.css on the login page only.
   Same original leaf, Tuki, olive fields and art slabs; what changes is comfort: 44px fields
   and touch targets, label beside field (as in the Flash loginScreen), "remember me" and the
   yellow forgot link on their own row, both slabs centred, a slim header so the form sits above
   the fold, and a short paper card under the stage (perks, what Ekoloko is, four questions). */

/* ---------- the form inside the leaf ---------- */
.login-page .ml-form{align-items:stretch}
.lg-field{display:grid;grid-template-columns:calc(104px * var(--s)) minmax(0,1fr);align-items:center;column-gap:10px;width:100%;margin-bottom:10px}
.login-page .ml-label{font-size:calc(23px * var(--s))}
.login-page .ml-input{height:44px;padding:0 10px;border-radius:3px;font-size:16px}
.login-page .ml-password-wrap .ml-input{padding-right:58px}
.login-page .ml-visibility{width:56px;font-size:13px;color:#eef7cf;border-radius:0 3px 3px 0}
.login-page .ml-visibility:hover{background:#ffffff1f}
.lg-options{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;width:100%;margin:0 0 4px}
.lg-options .ml-remember{min-height:44px;gap:8px;font-size:calc(17px * var(--s))}
.lg-options .ml-remember input{width:22px;height:22px;background-size:16px}
.lg-options .ml-recover{min-height:44px;margin:0;font-size:calc(18px * var(--s));white-space:normal;text-align:end}
.login-page .ml-login-button{width:calc(160px * var(--s));margin:2px auto 0}
.login-page .ml-signup{align-items:center;margin-top:calc(10px * var(--s));padding-top:calc(10px * var(--s));border-top:1px solid #ffffff3d}
.login-page .ml-signup h2{margin:0;font-size:calc(21px * var(--s))}
.login-page .ml-register-button{width:calc(172px * var(--s));margin:4px auto 0}
.login-page .ml-art-button[aria-busy=true]{animation:lg-wait 1.1s ease-in-out infinite}
@keyframes lg-wait{50%{filter:grayscale(.35) brightness(.88)}}

/* ---------- the stage ---------- */
.entry-head{position:relative;z-index:1;margin:0 0 10px;text-align:center;color:#fff;text-shadow:0 2px 1px #36571c,1px 0 0 #36571c,-1px 0 0 #36571c,0 -1px 0 #36571c}
.login-page .entry-title{margin:0;font:700 30px/1.15 EkoSpacer,Arial,sans-serif;color:#fff}
.entry-sub{margin:2px 0 0;font:700 15px/1.4 Arial,sans-serif;text-shadow:0 1px 2px #24410f,0 0 6px #36571c99}
.login-page .entry-stage{padding-top:22px;gap:0}
.login-page .entry-tuki{z-index:0}
.login-page .ml-notices{margin-top:10px}

/* ---------- under the stage: perks, about, questions ---------- */
.login-page .lg-perks{max-width:780px;margin:16px auto 0}
.lg-about{max-width:780px;margin:14px auto 0;padding:18px 20px 12px;background:var(--card);border:1px solid var(--image-line);border-radius:10px}
.lg-about h2{margin-bottom:6px;font-size:21px}
.lg-about>p{font-size:15px;line-height:1.75;color:var(--ink-soft)}
.lg-about>p strong{color:var(--ink)}
.lg-faq{margin-top:10px}
.lg-faq summary{font-size:15px}
.lg-faq details:last-child{border-bottom:0}
.lg-about .lg-about-more{margin-top:4px;font-size:14px;text-align:center}
.lg-about-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-weight:700}

/* ---------- phones ---------- */
@media (max-width:719px){
  .login-page .top-in{display:flex;align-items:center;gap:4px;padding:2px 8px;background:var(--band-grad)}
  .login-page .top-logo{width:96px;margin:0;flex:none}
  .login-page .top-nav{flex:1;min-height:48px;padding:0;background:none;flex-wrap:nowrap;justify-content:flex-end}
  .login-page .top-nav a{padding:0 9px;font-size:14px}
  .login-page .top-nav a[aria-current]{display:none}
  .login-page .entry-main{padding:0}
  .login-page .entry-stage{--leaf-w:470px;padding:18px 0 24px;background-position:center 30%}
  .login-page .entry-title{font-size:27px}
  .login-page .entry-head{margin-bottom:52px}
  .login-page .entry-tuki{width:96px;top:-64px;inset-inline-start:auto;inset-inline-end:calc(50% - 150px)}
  .login-page .ml-leaf-art{left:53%;top:48%;width:calc(var(--leaf-w) * 1.14)}
  .login-page .ml-leaf-content{--s:.94;width:min(332px,calc(100vw - 40px));padding:22px 0 18px}
  .login-page .lg-perks,.lg-about{margin-inline:12px}
}
@media (max-width:360px){
  .login-page .top-logo{width:84px}
  .login-page .top-nav a{padding:0 6px;font-size:13px}
  .login-page .ml-leaf-content{--s:.86;width:calc(100vw - 44px)}
  .lg-field{column-gap:8px}
}
/* Phones held sideways: the existing short stage from home3.css, with the slim header. */
@media (max-height:500px) and (orientation:landscape){
  .login-page .entry-head{margin-bottom:46px}
  .login-page .entry-title{font-size:22px}
  .login-page .entry-sub{display:none}
  .login-page .entry-stage{padding-top:10px}
}
@media (prefers-reduced-motion:reduce){.login-page .ml-art-button[aria-busy=true]{animation:none}}