/*
  UANT v1 — auth screens (member login + register), C7.
  Ported verbatim from the inline <style> blocks of docs/design/member/{login,register}.html
  so both pages share one file instead of duplicating the card/field rules.
  Depends on tokens.css (loaded first).
*/

body{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:20px}

.u-auth-card{background:linear-gradient(145deg,var(--u-panel-2),var(--u-panel));border:1px solid var(--u-line);border-radius:var(--u-r-lg);max-width:400px;min-width:0;padding:36px 32px;width:100%}
.u-auth-card.is-wide{max-width:460px}
.u-auth-card h1{font-size:var(--u-fs-xl);margin:8px 0 4px;letter-spacing:-.02em}
.u-auth-card p{color:var(--u-muted);font-size:var(--u-fs-xs);margin:0 0 26px}
.u-auth-card.is-wide p{margin-bottom:22px}

.u-auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.u-auth-card.is-wide .u-auth-field{margin-bottom:14px}
.u-auth-field label{color:var(--u-soft);font-size:11px;font-weight:600}
.u-auth-field small{color:var(--u-soft);font-size:11px}
.u-auth-field .u-req{color:var(--u-red)}
.u-pw-row{position:relative}
/* The mockup used --u-muted here, which its own token rule forbids below 12px;
   --u-soft keeps the flat look and clears WCAG AA. */
.u-pw-row button{background:none;border:0;color:var(--u-soft);cursor:pointer;font:600 11px var(--u-mono);letter-spacing:.04em;position:absolute;right:4px;top:50%;transform:translateY(-50%);
  /* Touch target 44px (WCAG 2.5.8) — tanpa ini tombol mata cuma selebar ikonnya. */
  align-items:center;display:flex;justify-content:center;min-height:44px;min-width:44px}
.u-pw-row button:hover{color:var(--u-cyan)}
.u-pw-row .u-input{padding-right:72px}

.u-auth-submit{margin-top:6px;width:100%}
/* Scoped under .u-auth-card so it beats `.u-auth-card p{margin:0 0 26px}`;
   unscoped (0,1,0) lost to it and every alt line lost its top margin, reading as
   0px above / 26px below the button. */
.u-auth-card .u-auth-alt{color:var(--u-muted);font-size:var(--u-fs-xs);margin:20px 0 0;text-align:center}
.u-auth-card.is-wide .u-auth-alt{margin-top:18px}
.u-auth-alt a{color:var(--u-cyan)}

.u-auth-err{background:var(--u-status-danger-bg);border:1px solid rgba(255,113,133,.3);border-radius:var(--u-r-sm);color:var(--u-status-danger-fg);font-size:11px;margin-bottom:16px;padding:10px 12px}
.u-auth-err[hidden]{display:none}

/* R4 placement block (register) */
.u-placement{background:rgba(113,112,255,.06);border:1px solid var(--u-line);border-radius:var(--u-r-md);margin-bottom:14px;padding:14px}
.u-placement-title{color:var(--u-soft);display:block;font-size:11px;font-weight:600;margin-bottom:10px}
.u-placement .u-field{margin-bottom:10px}
.u-leg-choice{display:flex;gap:8px;margin-top:8px}
.u-leg-btn{background:var(--u-panel-2);border:1px solid var(--u-line);border-radius:var(--u-r-sm);color:var(--u-soft);cursor:pointer;flex:1;font:600 11px var(--u-sans);padding:10px;text-align:center}
.u-leg-btn.is-active{background:rgba(113,112,255,.16);border-color:var(--u-cyan);color:var(--u-cyan)}
.u-sponsor-status{font-size:var(--u-fs-2xs);margin-top:6px}
.u-sponsor-status.ok{color:var(--u-green)}
.u-sponsor-status.bad{color:var(--u-red)}
.u-placement-hint{display:block;color:var(--u-soft);font-size:var(--u-fs-2xs);margin-top:8px}
.u-placement-preview{display:block;font-size:var(--u-fs-2xs);margin-top:6px;color:var(--u-soft)}
.u-placement-preview.ok{color:var(--u-green)}
.u-placement-preview.bad{color:var(--u-red)}

@media(max-width:480px){
  .u-auth-card{padding:26px 20px}
  /* Auto takes a full row; the two manual legs share the next row. */
  .u-leg-choice{flex-wrap:wrap}
  .u-leg-btn[data-leg="auto"]{flex:0 0 100%}
  .u-leg-btn[data-leg="left"],.u-leg-btn[data-leg="right"]{flex:1 1 0}
}
/* The longest leg label ("Auto (kaki tersedikit)") must not wrap on narrow phones. */
@media(max-width:380px){
  .u-leg-btn{font-size:var(--u-fs-2xs);padding:9px 6px}
}