/* Login page · loads after tuego.css and uses its tokens, Archivo and type roles.
   Square, ink on white, no shadows, gradients or blur; light theme only. */
body.login{overflow:auto; height:auto; min-height:100%}
.lg{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr}
.lg p{margin:0}

/* ---- brand half: Tuego's round symbol (or the client's logo), large and centred ---- */
.lg-brand{grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; padding:40px 48px;
  background:var(--color-action-primary-fill); color:var(--color-bg-zone)}
.lg-hero .symbol{display:block; width:clamp(220px, 26vw, 340px); height:auto; color:inherit; overflow:visible}
.lg-hero img.logo{display:block; height:clamp(64px, 9vw, 112px); width:auto}

/* Once on load, the dot travels one turn round the ring and stops in its place. The ring is
   round, so turning the whole symbol about its centre (the middle of its 1024 box) moves the
   dot and the gap it cuts together. Transform only, no loop, none under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .lg-hero .orbit{transform-box:view-box; transform-origin:512px 512px; animation:lg-orbit 1.2s cubic-bezier(.2,.7,.3,1) 1}
}
@keyframes lg-orbit{from{transform:rotate(-360deg)} to{transform:rotate(0deg)}}

/* ---- sign-in half: the switch sits over the same cell, so the column centres on the full
   height, level with the brand block; equal top and bottom padding clear the switch. ---- */
.lg-signin{grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; padding:88px 32px}
.lg-col{width:100%; max-width:420px; display:flex; flex-direction:column}
.lg-col h1{margin:8px 0 12px}
/* The title is Tuego's wordmark, under "Sign in". */
.lg-title .logo{display:block; height:44px; width:auto; color:var(--color-text-primary); margin:6px 0 4px}
.lg .lg-intro{color:var(--color-text-secondary); margin-bottom:28px}
.lg-go{display:flex; width:100%; padding:12px 18px; text-align:center; text-decoration:none; white-space:normal}
.lg-google{justify-content:center; align-items:center; gap:10px}
.lg-arrow{display:inline-block}
.lg .lg-err{color:var(--color-danger-fg); margin-top:12px}
.lg-err:empty{display:none}
.lg-rule{border:0; border-top:var(--border) solid var(--color-line-hairline); margin:28px 0 16px; width:100%}
.lg .small + .small{margin-top:4px}
.lg-col{overflow-wrap:anywhere}

/* ---- Arabic: mirrored by dir="rtl"; no uppercase or tracking, which break letter joining ---- */
[dir="rtl"] .lg-arrow{transform:scaleX(-1)}
[lang="ar"] .label{letter-spacing:0; text-transform:none}

/* ---- below 834px: stacked, language first, then brand, then sign-in ---- */
@media (max-width:833.98px){
  .lg{grid-template-columns:1fr; grid-template-rows:auto auto 1fr}
  .lg-brand{grid-column:1; grid-row:2; padding:32px 16px}
  .lg-hero .symbol{width:120px}
  .lg-signin{grid-column:1; grid-row:3; align-items:flex-start; padding:40px 16px 48px}
}