/* Sign-in screen (lazy). Two columns on a desktop (intro beside the card), one column on a phone (intro band above the
   card). The brand block, the slide copy and the card are ordinary flow items: nothing is placed on top of anything
   else, so they cannot overlap at any width. Colours only from the variables; --slide-color follows the slide shown. */
@property --slide-color{syntax:"<color>";inherits:true;initial-value:transparent}
#loginView.login-shell{--slide-color:var(--accent);position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100dvh;padding:0;background:transparent;transition:--slide-color .8s ease}
#loginView.login-shell.hidden{display:none}

/* intro side */
.lg-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,5vh,56px);min-width:0;min-height:100dvh;padding:clamp(24px,5vw,88px);border-inline-end:1px solid var(--line);background:radial-gradient(120% 90% at 28% 8%,color-mix(in oklab,var(--slide-color) 17%,transparent),transparent 62%),linear-gradient(160deg,var(--bg),var(--bg-2))}
.lg-brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.lg-brand__logo{display:block;height:44px;width:auto;max-width:min(180px,50vw);object-fit:contain;border-radius:12px}
.lg-brand__mark{flex:none}
.lg-brand__name{min-width:0;font-size:var(--fs-lg);overflow-wrap:anywhere}
.lg-brand--hero{flex-direction:column;justify-content:center;text-align:center;margin-block:auto;gap:var(--sp-4)}
.lg-brand--hero .lg-brand__logo{height:clamp(72px,12vw,120px);max-width:min(280px,70vw)}
.lg-brand--hero .lg-brand__mark{width:clamp(64px,10vw,96px);height:clamp(64px,10vw,96px);border-radius:28px;font-size:clamp(30px,5vw,46px)}
.lg-brand--hero .lg-brand__name{font-size:var(--fs-3xl);line-height:var(--lh-tight);background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .6s var(--ease-out) both}
.lg-desc{margin:0 auto;max-width:460px;color:var(--muted);font-size:var(--fs-md);line-height:var(--lh-loose);text-align:center}
.lg-visual>.lg-brand--hero+.lg-desc{margin-block:0 auto}
#loginView .ds-slides{--slide-color:inherit;width:100%;max-width:560px;margin:auto}
#loginView .ds-slides__stage{display:grid;min-height:0;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
#loginView .ds-slides__slide{display:grid;grid-area:1/1;min-width:0;visibility:hidden;opacity:0;animation:none;transition:opacity .5s ease,visibility 0s linear .5s}
#loginView .ds-slides__slide.is-active{visibility:visible;opacity:1;transition:opacity .5s ease}
#loginView .ds-slides__title{overflow-wrap:anywhere}
#loginView .ds-slides__text{overflow-wrap:anywhere}
#loginView .ds-slides:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-md)}
#loginView .ds-slides__icon img{width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* card side */
.lg-pane{display:grid;place-items:center;min-width:0;padding:clamp(18px,4vw,56px)}
.lg-card{width:min(460px,100%);padding:clamp(20px,3vw,34px)}
.lg-card{border-color:var(--accent-line);box-shadow:var(--shadow),0 0 60px -20px var(--accent-glow);animation:rise var(--dur-3) var(--ease-out) .08s both}
.lg-step{display:block;margin:0}
.lg-step.hidden{display:none}
.lg-title{margin:0 0 var(--sp-2);font-size:var(--fs-2xl);line-height:var(--lh-tight)}
.lg-subtitle{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
.lg-sub{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-md);line-height:var(--lh-base)}
.lg-sub:empty{display:none}
.lg-num{display:inline-block;direction:ltr;unicode-bidi:isolate;color:var(--text);font-weight:800;letter-spacing:.02em}
.lg-step .ds-field select{appearance:auto}
.lg-step .ds-field input[type=tel]{font-size:var(--fs-lg);letter-spacing:.04em}
.lg-step .ds-field input[type=tel]::placeholder{color:var(--muted-2);opacity:.7;letter-spacing:.04em}
.lg-step .ds-field.has-error{margin-bottom:var(--sp-3)}
.lg-step .ds-field__error span{display:block}
.lg-hint{color:var(--muted);font-weight:400}
.lg-msg{margin:var(--sp-2) 0 0;text-align:center}
.lg-submit{margin-top:var(--sp-2);min-height:52px;font-size:var(--fs-lg)}
.lg-note{margin:var(--sp-4) 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-loose);text-align:center}
.lg-link{display:inline;padding:0;border:0;background:none;color:var(--accent-text);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lg-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.lg-link[disabled]{opacity:.6;cursor:progress}
.lg-dev{margin:0 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border:1px dashed color-mix(in oklab,var(--warn) 45%,transparent);border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn-ink);font-size:var(--fs-sm);text-align:center;direction:rtl}
.lg-dev.hidden{display:none}
.lg-step .ds-otp{margin:var(--sp-2) 0 var(--sp-3)}
.lg-otp--dense{gap:var(--sp-1)}
.lg-otp--dense .ds-otp__box{height:52px;font-size:var(--fs-lg)}
.lg-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.lg-actions>.ds-btn{flex:1 1 140px}
.lg-devices{display:block}
.lg-devices.hidden{display:none}
.lg-devices .ds-row{cursor:default}
.lg-devices .ds-row__body{min-width:0}
.lg-devices .ds-row__title{overflow-wrap:anywhere}
.lg-devices .ds-btn--sm{flex:none;max-width:100%;white-space:nowrap;text-align:center}

/* terms sheet content */
.lg-terms{color:var(--text);line-height:var(--lh-loose);overflow-wrap:anywhere}
.lg-terms p,.lg-terms ul,.lg-terms ol{margin:0 0 var(--sp-3)}
.lg-terms ul,.lg-terms ol{padding-inline-start:var(--sp-5)}
.lg-terms a{color:var(--accent-text)}
.lg-terms__intro{margin-bottom:var(--sp-4);color:var(--muted)}
.lg-terms h2,.lg-terms h3{font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-2)}

/* phone: the intro becomes a band above the card */
@media(max-width:899px){
  #loginView.login-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100dvh}
  .lg-visual{min-height:0;border-inline-end:0;justify-content:flex-start;gap:var(--sp-3);padding:calc(var(--safe-t) + 16px) 18px 6px;background:radial-gradient(130% 120% at 50% -10%,color-mix(in oklab,var(--slide-color) 20%,transparent),transparent 70%)}
  .lg-brand__logo{height:34px}
  .lg-brand--hero{margin-block:0;flex-direction:row;justify-content:flex-start;text-align:start;gap:var(--sp-3)}
  .lg-brand--hero .lg-brand__logo{height:48px}
  .lg-brand--hero .lg-brand__mark{width:48px;height:48px;border-radius:15px;font-size:24px}
  .lg-brand--hero .lg-brand__name{font-size:var(--fs-xl)}
  .lg-desc{margin:0;text-align:start;font-size:var(--fs-sm);line-height:var(--lh-base)}
  .lg-visual>.lg-brand--hero+.lg-desc{margin:0}
  #loginView .ds-slides{max-width:none;margin:0;gap:var(--sp-3)}
  #loginView .ds-slides__slide{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-content:center;column-gap:var(--sp-4);row-gap:2px;padding:var(--sp-2) 0;text-align:start}
  #loginView .ds-slides__halo{top:-30px;right:-20px;left:auto;transform:none;width:200px}
  #loginView .ds-slides__icon{grid-row:1/span 2;align-self:center;width:56px;height:56px;border-radius:19px;font-size:26px}
  #loginView .ds-slides__icon svg{width:28px;height:28px}
  #loginView .ds-slides__title{margin:0;font-size:var(--fs-lg)}
  #loginView .ds-slides__text{max-width:none;font-size:var(--fs-sm);line-height:var(--lh-base)}
  #loginView .ds-slides__slide:not(:has(.ds-slides__icon)) .ds-slides__title,#loginView .ds-slides__slide:not(:has(.ds-slides__icon)) .ds-slides__text{grid-column:1/-1}
  .lg-pane{align-items:start;padding:var(--sp-3) 14px calc(var(--sp-5) + var(--safe-b))}
  .lg-card{padding:20px 18px}
  .lg-title{font-size:var(--fs-xl)}
}
@media(max-width:359px){
  .lg-visual{padding-inline:12px}
  .lg-pane{padding-inline:10px}
  .lg-card{padding:16px 14px}
  .lg-actions>.ds-btn{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  #loginView.login-shell{transition:none}
  #loginView .ds-slides__slide,#loginView .ds-slides__slide.is-active{transition:none}
}
html[data-low-end] #loginView.login-shell,html[data-reduce-motion] #loginView.login-shell{transition:none}
html[data-low-end] #loginView .ds-slides__slide,html[data-reduce-motion] #loginView .ds-slides__slide{transition:none}
/* sign-in by password (features/account/phone-password.js): the switch between the code and the password */
.lg-switch{display:block;width:max-content;max-width:100%;margin:var(--sp-3) auto 0;text-align:center}
.lg-devices [data-end-all]{margin-top:var(--sp-3)}