/* WARA COFFEE · Login responsive final layer v2 · 2026-09-30 */
html{width:100%;min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.wara-login{width:100%;min-width:0;overflow-x:hidden}
body.wara-login .shell{max-width:940px;margin-inline:auto}
body.wara-login .login{min-width:0}
body.wara-login .login form{width:100%;min-width:0}
body.wara-login .login .input-wrap{width:100%;min-width:0}
body.wara-login .login .input-wrap input{min-width:0}
body.wara-login .domain{max-width:100%;overflow-wrap:anywhere}

/* Laptop / tablet landscape */
@media (max-width:900px) and (min-width:761px){
  body.wara-login{padding:18px}
  body.wara-login .shell{width:min(820px,100%);min-height:520px;grid-template-columns:.9fr 1.1fr;border-radius:24px}
  body.wara-login .visual{padding:34px}
  body.wara-login .hero h1{font-size:clamp(34px,4.5vw,42px)}
  body.wara-login .hero p{font-size:12px;line-height:1.65}
  body.wara-login .login{padding:42px 36px}
}

/* Phone / tablet portrait */
@media (max-width:760px){
  html,body.wara-login{min-height:100%;background:#f5f7f3}
  body.wara-login{
    display:block;
    padding:0;
    overflow-x:hidden;
    overscroll-behavior-y:none;
  }
  body.wara-login .shell{
    width:100%;
    min-height:100dvh;
    max-width:none;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:linear-gradient(180deg,#f7f9f5 0%,#eef2ec 100%);
    overflow:visible;
  }
  body.wara-login .visual{display:none}
  body.wara-login .login{
    width:min(100%,480px);
    min-height:100dvh;
    margin-inline:auto;
    padding:
      max(24px,env(safe-area-inset-top))
      clamp(18px,5.5vw,28px)
      max(22px,env(safe-area-inset-bottom));
    justify-content:center;
  }
  body.wara-login .mobile-logo{
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 0 clamp(30px,8vh,52px);
  }
  body.wara-login .mobile-logo img{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:13px;
    box-shadow:0 8px 22px rgba(35,58,40,.10);
  }
  body.wara-login .mobile-logo strong{font-size:15px;line-height:1.25;letter-spacing:-.01em}
  body.wara-login .login h2{
    margin:0 0 7px;
    font-size:clamp(23px,7vw,28px);
    line-height:1.12;
    letter-spacing:-.035em;
  }
  body.wara-login .login .sub{
    max-width:390px;
    margin:0 0 22px;
    font-size:12.5px;
    line-height:1.55;
  }
  body.wara-login .login .field{margin-bottom:12px}
  body.wara-login .login .field label{
    margin-bottom:6px;
    font-size:11.5px;
    line-height:1.3;
  }
  body.wara-login .login .input-wrap{
    min-height:46px;
    border-radius:12px;
    background:#fff;
  }
  body.wara-login .login .input-wrap input{
    height:46px;
    min-height:46px;
    padding:0 13px;
    font-size:16px; /* prevent iOS focus zoom */
  }
  body.wara-login .login .show{
    min-width:80px;
    min-height:44px;
    padding:0 12px;
    font-size:10.5px;
    touch-action:manipulation;
  }
  body.wara-login .login .btn{
    height:47px;
    min-height:47px;
    margin-top:2px;
    border-radius:12px;
    font-size:12.5px;
    touch-action:manipulation;
  }
  body.wara-login .login .btn:hover{transform:none}
  body.wara-login .login .help{
    margin-top:15px;
    font-size:10.5px;
    line-height:1.5;
  }
  body.wara-login .domain{
    margin-top:13px;
    padding:6px 9px;
    font-size:9.5px;
  }
  body.wara-login .dev-credit{
    margin-top:10px;
    padding-bottom:2px;
    font-size:9px;
  }
  body.wara-login .error{
    margin-bottom:12px;
    padding:10px 11px;
    border-radius:10px;
    font-size:11px;
    line-height:1.45;
  }
}

/* Small phones */
@media (max-width:390px){
  body.wara-login .login{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }
  body.wara-login .mobile-logo{margin-bottom:30px}
  body.wara-login .mobile-logo img{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  body.wara-login .login h2{font-size:23px}
  body.wara-login .login .sub{font-size:11.5px;margin-bottom:18px}
  body.wara-login .login .field{margin-bottom:10px}
  body.wara-login .login .input-wrap,
  body.wara-login .login .input-wrap input{min-height:44px;height:44px}
  body.wara-login .login .btn{min-height:45px;height:45px}
  body.wara-login .login .show{min-width:74px;padding-inline:9px;font-size:10px}
}

/* Very narrow devices */
@media (max-width:340px){
  body.wara-login .login{padding-left:13px;padding-right:13px}
  body.wara-login .login h2{font-size:21px}
  body.wara-login .mobile-logo{gap:9px;margin-bottom:25px}
  body.wara-login .mobile-logo strong{font-size:14px}
  body.wara-login .login .sub{font-size:11px}
  body.wara-login .login .help{font-size:9.8px}
}

/* Short-height phones and landscape: avoid clipped content */
@media (max-width:760px) and (max-height:650px){
  body.wara-login .login{
    min-height:100dvh;
    justify-content:flex-start;
    padding-top:max(16px,env(safe-area-inset-top));
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  body.wara-login .mobile-logo{margin-bottom:18px}
  body.wara-login .login .sub{margin-bottom:15px}
  body.wara-login .login .help{margin-top:11px}
  body.wara-login .domain{margin-top:10px}
  body.wara-login .dev-credit{margin-top:7px}
}

@media (orientation:landscape) and (max-height:500px) and (max-width:900px){
  body.wara-login .login{width:min(100%,620px);padding-inline:22px}
  body.wara-login .mobile-logo{margin-bottom:12px}
  body.wara-login .mobile-logo img{width:38px;height:38px;flex-basis:38px;border-radius:10px}
  body.wara-login .login h2{font-size:21px}
  body.wara-login .login .sub{margin-bottom:12px;font-size:11px}
  body.wara-login .login .field{margin-bottom:8px}
  body.wara-login .login .input-wrap,
  body.wara-login .login .input-wrap input{height:42px;min-height:42px}
  body.wara-login .login .btn{height:43px;min-height:43px}
  body.wara-login .login .help{margin-top:8px}
  body.wara-login .domain{margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  body.wara-login *,body.wara-login *::before,body.wara-login *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}