/* The entrance pages (allauth layout override) — the marketing palette as a floating
   card, so login and signup read as a popup. (docs/features/website.md) */
:root{
  --paper:#FAF6EF; --paper-line:#F2D9B2; --amber:#C7822E; --amber-deep:#8A5524;
  --cocoa-deep:#3A2410; --ink:#0F0F0F; --muted:#5A5A5A; --white:#FFFFFF;
  --radius:20px; --shadow:0 20px 45px -25px rgba(58,36,16,0.45);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(199,130,46,0.10), transparent 70%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}
.auth-backdrop{min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:28px 16px 60px}
.auth-brand a{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink)}
.auth-logo{color:var(--amber); font-size:22px}
.auth-brand b{font:600 17px 'Space Grotesk',sans-serif; letter-spacing:.2px}
.auth-brand small{display:block; font:600 9px 'Inter',sans-serif; letter-spacing:3px; color:var(--muted)}
.auth-card{
  width:100%; max-width:420px; margin-top:9vh; background:var(--white);
  border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:34px 36px 26px;
}
.auth-card h1{font:600 26px/1.2 'Space Grotesk',sans-serif; margin:0 0 6px}
.auth-card > p, .auth-card form > p > span{color:var(--muted); font-size:13.5px}
.auth-card label{display:block; font:600 12.5px 'Inter',sans-serif; margin:0 0 6px; color:var(--ink)}
.auth-card form > p{margin:0 0 16px}
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text]{
  width:100%; padding:11px 13px; font:400 14.5px 'Inter',sans-serif; color:var(--ink);
  background:var(--paper); border:1px solid var(--paper-line); border-radius:10px; outline:none;
}
.auth-card input:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(199,130,46,0.15)}
.auth-card input[type=checkbox]{width:auto; margin-right:8px}
.auth-card input[type=checkbox] + label{display:inline; font-weight:400; color:var(--muted)}
.auth-card button[type=submit]{
  width:100%; padding:12px; margin-top:4px; cursor:pointer;
  font:600 15px 'Inter',sans-serif; color:#fff; background:var(--amber);
  border:none; border-radius:999px; transition:background .15s;
}
.auth-card button[type=submit]:hover{background:var(--amber-deep)}
.auth-card a{color:var(--amber-deep); font-weight:600; text-decoration:none}
.auth-card a:hover{text-decoration:underline}
.auth-card .errorlist, .auth-card .auth-note{
  list-style:none; margin:0 0 14px; padding:10px 14px; font-size:13px; border-radius:10px;
  background:#FDF0E7; border:1px solid #F0CBA8; color:#8A4A12;
}
.auth-card .errorlist li{margin:0}
.auth-foot{margin:20px 0 0; padding-top:16px; border-top:1px solid var(--paper-line);
  font-size:13px; color:var(--muted); text-align:center}
@media (max-width:480px){ .auth-card{margin-top:4vh; padding:26px 22px} }
/* Checkbox rows (Remember me): box and label on one line, whichever order allauth
   renders them in. */
.auth-card form p:has(> input[type=checkbox]){display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.auth-card form p:has(> input[type=checkbox]) label{margin:0; font-weight:400; color:var(--muted)}
.auth-card form p:has(> input[type=checkbox]) input{margin:0}
/* Django's password-rules help list: quiet guidance, not a warning. */
.auth-card form ul:not(.errorlist){margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px}
.auth-card form ul:not(.errorlist) li{margin:2px 0}