/* ============================================================
   DACHOST panel — page: auth (/login, /register, /invite, /forgot, /reset)
   Page-specific tweaks only; everything else comes from app.css.
   The layout-auth shell puts the brand above and the language/theme
   controls below; this file styles what the auth views render between.
   ============================================================ */
.p-auth{width:100%;max-width:400px;margin:0 auto}
.p-auth .auth-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:none}
.p-auth h1{font-size:var(--fs-20);font-weight:600;letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin:0 0 20px}
.p-auth .auth-p{margin:-8px 0 20px;font-size:var(--fs-135);color:var(--text-2)}
.p-auth .auth-p + .auth-p{margin-top:-12px}
.p-auth .notice{margin-bottom:16px}

/* form: 16px between fields, 6px label -> control (from .f), 44px controls */
.p-auth .auth-form{display:grid;gap:16px;margin:0}
.p-auth .f{display:grid;gap:6px;font-size:var(--fs-13);font-weight:600;color:var(--text-2)}
.p-auth .f-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.p-auth .f-aside{font-size:var(--fs-125);font-weight:500;color:var(--text-3)}
.p-auth .f-aside:hover{color:var(--text)}
.p-auth .in{height:var(--ctl-lg);font-size:var(--fs-14)}
.p-auth .in[readonly]{background:var(--bg);color:var(--text-2)}

/* password field with the eye toggle inside (30px ghost button, vertically centred in 44px) */
.p-auth .pw{position:relative;display:block}
.p-auth .pw .in{padding-right:44px}
.p-auth .pw .pw-toggle{position:absolute;right:7px;top:7px;width:30px;height:30px;color:var(--text-3)}
.p-auth .pw .pw-toggle:hover{color:var(--text)}
.p-auth .pw .pw-toggle[aria-pressed="true"]{color:var(--text)}

/* terms checkbox row: 16px box, ink accent, 13.5px regular text */
.p-auth .chk{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-135);font-weight:400;color:var(--text);cursor:pointer}
.p-auth .chk input{flex:0 0 auto;width:16px;height:16px;margin:3px 0 0;accent-color:var(--ink)}
.p-auth .chk .link{color:var(--text)}

/* the one submit and the social buttons span the column */
.p-auth .btn-lg{width:100%}
.p-auth a.btn-lg{margin-top:4px}

/* "or" divider: 12px text between two hairlines */
.p-auth .auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;font-size:var(--fs-12);color:var(--text-3)}
.p-auth .auth-or::before,.p-auth .auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* social sign-in: visible, disabled until the providers are wired up */
.p-auth .auth-social{display:grid;gap:8px}
.p-auth .auth-social .btn{font-weight:500}
.p-auth .auth-social .btn .i{width:18px;height:18px;color:var(--text)}
.p-auth .auth-social .btn[aria-disabled="true"]{opacity:.55;cursor:default}
.p-auth .auth-social .btn[aria-disabled="true"]:hover{background:var(--surface);border-color:var(--line)}

/* line under the panel */
.p-auth .auth-note{margin:16px 0 0;text-align:center;font-size:var(--fs-13);color:var(--text-3)}
.p-auth .auth-note .link{color:var(--text-2)}

@media (max-width:640px){
  .p-auth .auth-panel{padding:24px 20px}
  .p-auth .in{font-size:var(--fs-16)}
}