/* Sign-in screen, direction B+ (LOGIN-001 / roadmap D3.1).
   A navy brand half with the reversed lockup and a quiet form half. Every
   colour, face and radius comes from tokens.css, which the page loads first. */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

body.login-page{
  min-height:100svh;
  background:var(--hs-ground);
  color:var(--hs-ink);
  font-family:var(--hs-font-body);
  font-size:var(--hs-text-base);
  line-height:var(--hs-leading);
}

.login-shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100svh}

/* Brand half */
.login-brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:var(--hs-space-6);
  padding:var(--hs-space-12) clamp(32px,5vw,72px);
  background:
    radial-gradient(600px 420px at 12% 108%, var(--hs-teal-glow), transparent 70%),
    radial-gradient(520px 360px at 100% -10%, var(--hs-teal-glow), transparent 70%),
    var(--hs-navy);
  color:var(--hs-surface);
}
.login-brand__logo{width:min(320px,80%);height:auto}
.login-brand__tagline{margin:0;font-family:var(--hs-font-head);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:var(--hs-leading-tight);color:var(--hs-gold-bright);text-wrap:balance}
.login-brand__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hs-space-3);color:var(--hs-on-navy-muted);max-width:36ch}
.login-brand__points li{display:flex;gap:var(--hs-space-3);align-items:baseline}
.login-brand__points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--hs-teal);transform:translateY(-2px)}
.login-brand__credit{margin:0;margin-top:auto;padding-top:var(--hs-space-8);font-size:var(--hs-text-sm);color:var(--hs-on-navy-muted);direction:ltr;text-align:start}
.login-brand__credit strong{color:var(--hs-teal);font-weight:600}
[dir="rtl"] .login-brand__credit{text-align:end}

/* Form half */
.login-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--hs-space-12) var(--hs-space-6)}
.language-switch{position:absolute;top:var(--hs-space-6);inset-inline-end:var(--hs-space-6);display:flex;gap:4px;padding:4px;border:1px solid var(--hs-line);border-radius:var(--hs-radius-pill);background:var(--hs-surface)}
.language-switch a{min-height:36px;display:inline-flex;align-items:center;padding:0 var(--hs-space-4);border-radius:var(--hs-radius-pill);color:var(--hs-muted);font-weight:600;font-size:var(--hs-text-sm);text-decoration:none}
.language-switch a.active{background:var(--hs-navy);color:var(--hs-surface)}
.language-switch a:focus-visible{outline:0;box-shadow:var(--hs-focus-ring)}

.login-form-wrap{width:min(420px,100%);display:flex;flex-direction:column;gap:var(--hs-space-4);padding:var(--hs-space-8);border:1px solid var(--hs-line);border-radius:var(--hs-radius-xl);background:var(--hs-surface);box-shadow:var(--hs-shadow-md)}
.login-form-wrap h1{margin:0;font-family:var(--hs-font-head);font-weight:700;font-size:var(--hs-text-2xl);line-height:var(--hs-leading-tight);color:var(--hs-navy)}
.login-subtitle{margin:0;color:var(--hs-muted)}
.login-form{display:flex;flex-direction:column;gap:var(--hs-space-4);margin-top:var(--hs-space-2)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:var(--hs-text-md);color:var(--hs-navy)}
.field input{width:100%;min-height:var(--hs-control-height-lg);padding:0 var(--hs-space-4);border:1px solid var(--hs-line-strong);border-radius:var(--hs-radius-md);background:var(--hs-surface);color:var(--hs-ink);font:inherit}
.field input::placeholder{color:var(--hs-muted);opacity:.7}
.field input:focus{outline:0;border-color:var(--hs-teal);box-shadow:var(--hs-focus-ring)}
.login-btn{min-height:var(--hs-control-height-lg);margin-top:var(--hs-space-2);border:0;border-radius:var(--hs-radius-md);background:var(--hs-teal);color:var(--hs-on-teal);font:inherit;font-weight:700;cursor:pointer}
.login-btn:hover{filter:brightness(1.05)}
.login-btn:focus-visible{outline:0;box-shadow:var(--hs-focus-ring)}
.error{padding:var(--hs-space-3) var(--hs-space-4);border:1px solid var(--hs-danger-line);border-radius:var(--hs-radius-md);background:var(--hs-danger-wash);color:var(--hs-danger);font-weight:600;font-size:var(--hs-text-md)}

/* Tablet portrait and phones: the brand half becomes a header. */
@media (max-width: 899px){
  .login-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .login-brand{padding:var(--hs-space-8) var(--hs-space-6) var(--hs-space-10);gap:var(--hs-space-3);align-items:center;text-align:center}
  .login-brand__logo{width:min(220px,62%)}
  .login-brand__tagline{font-size:var(--hs-text-xl)}
  .login-brand__points,.login-brand__credit{display:none}
  .login-form-wrap{padding:var(--hs-space-6)}
  .language-switch{position:static;align-self:center;margin:0;order:-1}
  .login-panel{flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--hs-space-4);padding:var(--hs-space-5) var(--hs-space-4) var(--hs-space-10)}
}

/* The credit sits in the brand half on wide screens and under the card on small ones. */
.login-panel__credit{display:none;margin:0;font-size:var(--hs-text-xs);color:var(--hs-muted);direction:ltr}
.login-panel__credit strong{color:var(--hs-teal-deep);font-weight:600}
@media (max-width: 899px){.login-panel__credit{display:block}}

@media (max-width: 899px) and (min-height: 1000px){.login-panel{justify-content:center}}