/* TheDayRate — sign in, create account, forgot and reset password.
   Colours only from tokens.css. One centred card, quiet and plain. */

*{box-sizing:border-box}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:15px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,p{margin:0}
a{color:var(--accent-hover);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

.auth-top{display:flex;justify-content:space-between;align-items:center;max-width:1120px;width:100%;margin:0 auto;padding:22px 24px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.logo img{width:30px;height:30px}
.auth-top a.quiet{color:var(--text-muted);font-weight:600;text-decoration:none}

.auth-main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 48px}
.auth-card{width:100%;max-width:420px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-card)}
.auth-card h1{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.auth-lede{margin-top:6px;color:var(--text-muted)}

.providers{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.provider{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;width:100%;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:600 15px var(--font-sans);cursor:pointer}
.provider svg{width:18px;height:18px;flex:none}
.or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--text-muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

form{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
label{font-size:14px;font-weight:600}
.field-top a{font-size:13.5px;font-weight:600}
input{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:inherit;font-size:16px}
input::placeholder{color:var(--text-faint)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[aria-invalid="true"]{border-color:var(--danger)}
.password{position:relative}
.password input{padding-right:64px}
.show{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:600 13px var(--font-sans);cursor:pointer}
.hint{font-size:13px;color:var(--text-muted)}

.btn{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;padding:0 18px;border:0;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font:600 15.5px var(--font-sans);cursor:pointer}
.btn:disabled{opacity:.6;cursor:progress}
.link-btn{align-self:center;padding:4px;border:0;background:none;color:var(--accent-hover);font:600 14px var(--font-sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.alert{margin-top:18px;padding:12px 14px;border-radius:var(--radius-sm);font-size:14.5px;line-height:1.45}
.alert-error{background:var(--danger-soft);color:var(--danger)}
.alert-ok{background:var(--success-soft);color:var(--success)}
.done{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.done p{color:var(--text-muted)}
.done b{color:var(--text)}

.small{margin-top:20px;font-size:13px;color:var(--text-muted);text-align:center}
.auth-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--text-muted);text-align:center}
.page-foot{padding:20px 16px 28px;text-align:center;font-size:13px;color:var(--text-muted)}
.page-foot a{color:var(--text-muted)}

@media (hover:hover) and (pointer:fine){
  .provider:hover{background:var(--bg)}
  .btn:hover{background:var(--accent-hover)}
  .show:hover{background:var(--ghost);color:var(--text)}
}
@media (prefers-reduced-motion: no-preference){
  .btn,.provider{transition:background-color .14s,transform .12s cubic-bezier(.23,1,.32,1)}
  .btn:active,.provider:active{transform:scale(.98)}
}
@media (max-width: 480px){
  .auth-main{padding-top:8px}
  .auth-card{padding:24px 20px;border:0;box-shadow:none;background:transparent}
}

/* Privacy policy and terms */
.legal{width:100%;max-width:720px;margin:0 auto;padding:16px 24px 56px}
.legal h1{font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.legal .updated{margin-top:8px;color:var(--text-muted)}
.legal .note{margin-top:20px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--text)}
.legal h2{margin:36px 0 10px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.legal p,.legal li{color:var(--text);font-size:16px;line-height:1.65}
.legal p + p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:22px}
.legal li + li{margin-top:6px}
.legal table{width:100%;margin-top:12px;border-collapse:collapse;font-size:15px}
.legal th,.legal td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal th{color:var(--text-muted);font-weight:600;font-size:14px}
@media (max-width: 600px){
  .legal{padding:8px 16px 48px}
  .legal h1{font-size:28px}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .legal td{padding:2px 0;border:0}
  .legal td::before{content:attr(data-label);display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--text-muted)}
  .legal td:first-child{font-weight:600}
  .legal td:first-child::before{display:none}
}