/* ==========================================================================
   Sign-in (login.php) and the consent screen (oauth/authorize.php): the brand panel beside the form.
   Flat surfaces from the ladder with a hairline between them; the mark, the name and its story carry
   the character. Tokens only, both themes.
   ========================================================================== */
body.auth{min-height:100vh;min-height:100dvh;background:var(--canvas)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr);min-height:100vh;min-height:100dvh}

/* ---- the brand panel (class name kept: tests and the consent screen use it) ---- */
.auth-stone{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-10);padding:var(--space-8) var(--space-10);background:var(--surface-1);border-right:1px solid var(--line);color:var(--ink-1)}
.stone-top{display:flex;align-items:center;gap:var(--space-3)}
.stone-mark{width:32px;height:32px;flex-shrink:0;color:var(--ink-1)}
.stone-mark svg{width:100%;height:100%}
.stone-org{font-size:var(--text-title);font-weight:600;letter-spacing:var(--tracking-title)}
.stone-body{max-width:560px}
/* The wordmark: the one display size on the page (a brand moment, like the error code). */
.stone-title{font-size:clamp(56px,7vw,96px);font-weight:600;letter-spacing:-.04em;line-height:.95;color:var(--ink-1);hyphens:manual}
.stone-def{margin-top:var(--space-6);max-width:440px;font-size:var(--text-body);line-height:var(--leading-body);color:var(--ink-2)}
.stone-def i{font-style:italic;color:var(--ink-1)}
.stone-def .mono{color:var(--ink-1)}
.stone-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-meta);color:var(--ink-3)}
.stone-foot > span{display:inline-flex;align-items:center;gap:var(--space-2)}
.stone-foot time{color:var(--ink-2)}

/* ---- the form ---- */
.auth-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-8) var(--space-16)}
.auth-theme{position:absolute;top:var(--space-4);right:var(--space-4)}
.auth-card{width:100%;max-width:360px;animation:rise-in var(--t-slow) var(--ease-out) both}
.auth-card h1{font-size:var(--text-display);letter-spacing:var(--tracking-display)}
.auth-sub{margin:var(--space-2) 0 var(--space-6);font-size:var(--text-body);line-height:var(--leading-body);color:var(--ink-2)}
.auth-card .notice{margin-bottom:var(--space-4)}
.auth-card .fld{margin-bottom:var(--space-4)}
.auth-card div.inp{min-height:var(--control-h-lg)}
.auth-card div.inp input{height:calc(var(--control-h-lg) - 2px);font-size:var(--text-body)}
.auth-remember{margin:var(--space-1) 0 var(--space-5)}
.auth-card .btn.lg i{transition:transform var(--t) var(--ease-out)}
.auth-card .btn.lg:hover i.ti-arrow-right{transform:translateX(2px)}
.auth-hint{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-meta);line-height:var(--leading-ui);color:var(--ink-3)}
.auth-hint i{margin-top:1px;font-size:14px}
.auth-back{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);margin-top:var(--space-4);font-size:var(--text-ui);color:var(--accent-text)}
.auth-back:hover{text-decoration:underline;text-underline-offset:3px}
.auth-foot{position:absolute;bottom:var(--space-5);left:0;right:0;display:flex;justify-content:center;gap:var(--space-3);font-size:var(--text-meta);color:var(--ink-3)}

/* One-time code: a real input laid over six cells (paste and one-time-code autofill keep working). */
.otp{position:relative;margin:var(--space-2) 0 var(--space-1)}
.otp input{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;cursor:text}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2)}
.otp-cells span{
  display:grid;place-items:center;height:56px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface-1);
  font-family:var(--mono);font-size:var(--text-page);font-weight:600;color:var(--ink-1);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.otp-cells span:nth-child(3){margin-right:var(--space-2)}
.otp-cells span.filled{border-color:var(--line-3)}
.otp-cells span.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.otp-cells span.on::after{content:"";width:2px;height:24px;background:var(--accent-text);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---- phones and narrow windows: the brand panel becomes a band above the form ---- */
@media (max-width:980px){
  .auth-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .auth-stone{gap:var(--space-5);padding:var(--space-5) var(--space-5) var(--space-6);border-right:0;border-bottom:1px solid var(--line)}
  .stone-title{font-size:clamp(44px,13vw,64px)}
  .stone-def,.stone-foot{display:none}
  .auth-panel{justify-content:flex-start;padding:var(--space-8) var(--space-5) var(--space-16)}
  .auth-theme{top:var(--space-2);right:var(--space-2)}
}