/* auth.components.css · ported from the design handoff (handoff_out/auth_door/auth_door.css) 2026-06-10; page-scaffold dropped (live shell owns body). Loaded after shell.chrome.css. */
/* ============================================================
   auth_door.css · Login Door — NEW components for the auth surface
   Built ONLY from supply.tokens.css variables. No new colours, fonts,
   radii, shadows, or provenance hues. Extends the shipped Atlas shell:
   reuses .liff/.liffcard/.lmk/.lhead/.lsub/.rolepick/.roleopt/.who-chip/
   .seg/.btn/.line-cta/.detectrow/.pulse/.gate verbatim, and adds only
   the form field, the door divider, the LINE button face, and the
   role-routed welcome block.
   ============================================================ */

/* (page scaffold handled by the live shell) */

/* the auth stage = warm paper, the door floats centred on it (reuses .liff
   centring but on the radial-paper ground used across the shell .stage) */
.authstage{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(var(--s4),5vh,var(--s7)) var(--s4) var(--s6);
  background:radial-gradient(125% 90% at 50% -12%, var(--surface2), var(--bg));
}

/* the door card — extends .liffcard (same surface/border/shadow/radius)
   but left-aligned for the form, and a touch wider */
.liffcard.authcard{ width:min(412px,100%); text-align:left; padding:var(--s6) var(--s5) var(--s5); }
/* brand logo lives in the shell header (every screen) — hide the card's own logo
   so the door shows ONE logo, not two */
.authcard .lmk{ display:none; }
.authcard h2{ font-size:var(--fs-xl); margin:0 0 .25rem; }
.authcard .lsub{ font-size:var(--fs-sm); margin:0 0 var(--s5); line-height:var(--lh-base); }
.authcard .eyebrow{ margin-bottom:.4rem; }

/* ---- the LINE button face (drawn inline, no CDN) ---- */
/* reuses .btn.full.line-cta from supply.components.css for colour/size;
   this only lays out the inline glyph + label + brand-grade weight */
.btn.line-cta .lico{ width:22px; height:22px; flex:0 0 22px; display:inline-flex; }
.btn.line-cta .lico svg{ width:100%; height:100%; display:block; }
.btn.line-cta b{ font-weight:var(--fw-x); letter-spacing:.01em; }
.linehint{ display:flex; align-items:center; gap:.4rem; margin-top:.5rem;
  font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
.linehint .dotpin{ width:7px; height:7px; border-radius:50% 50% 50% 0; transform:rotate(45deg);
  background:var(--brand); flex:0 0 7px; }

/* ---- "or" divider between LINE and the email/phone form ---- */
.authdiv{ display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0 var(--s4);
  color:var(--muted); font-size:var(--fs-xs); }
.authdiv::before,.authdiv::after{ content:""; flex:1; height:1px; background:var(--line2); }

/* ---- identifier toggle (email ⇄ phone) — reuses .seg, full-width 2-up ---- */
.idtoggle{ display:flex; width:100%; margin-bottom:var(--s4); }
.idtoggle.seg{ border-radius:var(--r-sm); }
.idtoggle.seg button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .6rem; font-size:var(--fs-sm); font-weight:var(--fw-semi); }
.idtoggle.seg button .ic{ width:16px; height:16px; display:inline-flex; }
.idtoggle.seg button .ic svg{ width:100%; height:100%; display:block; }

/* ---- the form ---- */
.authform{ display:flex; flex-direction:column; gap:var(--s4); }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field .flabel{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--ink2); white-space:nowrap; }
.field .flabel > span{ white-space:nowrap; }
.field .flabel .opt{ font-weight:var(--fw-reg); color:var(--muted); }
/* input wrapper carries the leading icon + (for password) the show/hide */
.au-fctl{ display:flex; align-items:center; gap:.5rem; background:var(--surface);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:0 .6rem;
  transition:border-color .14s, box-shadow .14s; }
.au-fctl .lic{ width:18px; height:18px; flex:0 0 18px; color:var(--muted); display:inline-flex; }
.au-fctl .lic svg{ width:100%; height:100%; display:block; }
.au-fctl input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; color:var(--ink);
  padding:.62rem 0; outline:none; }
.au-fctl input::placeholder{ color:var(--muted); }
.au-fctl input[type=password]{ letter-spacing:.08em; }
.au-fctl:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
/* phone/email use mono for the digit-y identifier so it reads as instrument input */
.au-fctl input.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* error styling on a field */
.field.bad .au-fctl{ border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg); }
.field.bad .flabel{ color:var(--bad); }
.ferr{ display:flex; align-items:center; gap:.35rem; font-size:var(--fs-xs); color:var(--bad); font-weight:var(--fw-semi); }
.ferr .ic{ width:14px; height:14px; flex:0 0 14px; display:inline-flex; }
.ferr .ic svg{ width:100%; height:100%; display:block; }
.ferr[hidden]{ display:none; }

/* show/hide password toggle (text button, ≥44px hit on coarse) */
.pwtoggle{ border:0; background:transparent; cursor:pointer; font:inherit; color:var(--brand2);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em;
  padding:.4rem .3rem; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.pwtoggle .ic{ width:16px; height:16px; display:inline-flex; }
.pwtoggle .ic svg{ width:100%; height:100%; display:block; }
.pwtoggle:hover{ color:var(--brand-ink); }

/* form-level error banner (invalid_credentials, rate_limited, …) */
.authbanner{ display:flex; align-items:flex-start; gap:.55rem; margin:0 0 var(--s2);
  background:var(--bad-bg); border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);
  border-radius:var(--r); padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45; }
.authbanner .ic{ width:17px; height:17px; flex:0 0 17px; color:var(--bad); margin-top:1px; display:inline-flex; }
.authbanner .ic svg{ width:100%; height:100%; display:block; }
.authbanner b{ color:var(--bad); }
.authbanner[hidden]{ display:none; }

/* submit button busy spinner (reuses .btn.full) */
.btn .spin{ width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  border:2px solid color-mix(in srgb,#fff 45%,transparent); border-top-color:#fff;
  animation:authspin .7s linear infinite; }
@keyframes authspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .btn .spin{ animation:none; } }

/* meta row under the form: forgot / register */
.authmeta{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; margin-top:.2rem; font-size:var(--fs-sm); }
.authmeta a, .authmeta button.link{ border:0; background:transparent; cursor:pointer; font:inherit;
  color:var(--brand2); font-weight:var(--fw-semi); padding:.2rem 0; }
.authmeta a:hover, .authmeta button.link:hover{ color:var(--brand-ink); text-decoration:underline; }
.authmeta .noacct{ color:var(--muted); }

/* tiny secure footer line under the card */
.authfoot{ display:flex; align-items:center; justify-content:center; gap:.45rem;
  margin:var(--s4) 0 0; font-size:var(--fs-2xs); color:var(--muted); }
.authfoot .ic{ width:13px; height:13px; display:inline-flex; color:var(--pv-verified); }
.authfoot .ic svg{ width:100%; height:100%; display:block; }

/* ---- LINE redirect splash (reuses .liffcard .lmk .lhead .detectrow .pulse) ---- */
.authcard.redirecting{ text-align:center; }
.authcard.redirecting .lmk{ margin:0 auto var(--s3); width:54px; height:54px; }
.authcard.redirecting h2{ text-align:center; }
.authcard.redirecting .lsub{ text-align:center; max-width:34ch; margin-left:auto; margin-right:auto; }
.authcard.redirecting .detectrow{ justify-content:center; }

/* ---- role-routed WELCOME card ---- */
.authcard.welcome{ text-align:center; }
.authcard.welcome .lmk{ margin:0 auto var(--s3); width:46px; height:46px; }
.authcard.welcome .okpill{ display:inline-flex; align-items:center; gap:.4rem; margin:0 auto var(--s3);
  background:var(--pv-verified-bg); color:var(--pv-verified); border:1px solid var(--pv-verified-ln);
  border-radius:var(--r-pill); padding:.22rem .7rem; font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.authcard.welcome .okpill .ic{ width:14px; height:14px; display:inline-flex; }
.authcard.welcome .okpill .ic svg{ width:100%; height:100%; display:block; }
.authcard.welcome h2{ text-align:center; }
.authcard.welcome .wholine{ color:var(--muted); font-size:var(--fs-sm); margin:0 0 var(--s5); }
.authcard.welcome .wholine b{ color:var(--ink); font-weight:var(--fw-bold); }
.routelabel{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  font-weight:var(--fw-bold); margin-bottom:.5rem; text-align:left; }
/* the destination row — reuses the .roleopt visual (icon tile + meta + arrow) */
.destrow{ display:flex; align-items:center; gap:.8rem; text-align:left; width:100%;
  border:1px solid var(--brand); background:var(--brand-soft); border-radius:var(--r); padding:.8rem .85rem; }
.destrow .dav{ width:42px; height:42px; border-radius:11px; flex:0 0 42px; display:grid; place-items:center;
  background:var(--surface); color:var(--brand2); border:1px solid var(--brand); }
.destrow .dav .ic{ width:22px; height:22px; display:inline-flex; }
.destrow .dav .ic svg{ width:100%; height:100%; display:block; }
.destrow .dmeta{ flex:1; min-width:0; }
.destrow .dmeta b{ display:block; font-size:var(--fs-md); color:var(--brand-ink); }
.destrow .dmeta span{ font-size:var(--fs-xs); color:var(--brand2); }
.destrow .darrow{ color:var(--brand2); font-size:1.1rem; }
.welcome .btn.full{ margin-top:var(--s5); }
.welcome .switchline{ margin-top:var(--s3); }
.welcome .switchline button{ border:0; background:transparent; cursor:pointer; font:inherit;
  color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-semi); }
.welcome .switchline button:hover{ color:var(--ink); text-decoration:underline; }

/* the LINE-webview note (no header chrome inside LINE in-app browser) */
.webviewnote{ display:none; }
[data-webview="1"] .authstage{ padding-top:var(--s4); }
[data-webview="1"] .webviewnote{ display:flex; align-items:center; gap:.5rem;
  margin:0 auto var(--s3); width:min(412px,100%); font-size:var(--fs-2xs); color:var(--muted);
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-pill); padding:.35rem .7rem; }
[data-webview="1"] .webviewnote .dot{ width:7px; height:7px; border-radius:50%; background:#06c755; flex:0 0 7px; }

/* ---- responsive ---- */
@media (max-width:480px){
  .authstage{ padding:var(--s3) var(--s3) var(--s6); align-items:stretch; }
  .liffcard.authcard{ padding:var(--s5) var(--s4) var(--s4); }
  .authcard h2{ font-size:var(--fs-lg); }
}
@media (pointer:coarse){
  .au-fctl input{ padding:.72rem 0; }
  .pwtoggle, .authmeta a, .authmeta button.link{ min-height:44px; }
  .idtoggle.seg button{ min-height:44px; }
}