/* Shared by login, signup, forgot and reset.
   Tokens are the public site's, from site/design.md: these pages sit between
   the marketing site and the console, and a visitor arriving from the landing
   page should not feel the brand change at the door. One file rather than four
   copies of the same inline block: four copies is how two of them end up a
   shade different from the other two. */

:root{
  --forest:#0D3E2F; --forest-deep:#072A1F; --foliage:#1E4D3D;
  --ivory:#FCF9F1; --ivory-sunken:#F6F3EB;
  --bg:#FCF9F1; --surface:#F6F3EB; --line:#DCDAD2; --line-control:#C9C6BB;
  --ink:#1C1A17; --ink-2:#3B463E; --muted:#3B463E;
  --brand:#0D3E2F; --brand-2:#1E4D3D; --on-accent:#F6F3EB;
  --cta:#F9B217; --cta-2:#E89C05; --on-cta:#0D3E2F;
  --bad:#9B2C2C; --good:#0D3E2F;
  --display:Domine,Clarendon,Georgia,serif;
  --sans:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:rgba(252, 249, 241, 0.55); --surface:#0D3E2F; --line:rgba(246,243,235,.12); --line-control:rgba(246,243,235,.3);
  --ink:#F6F3EB; --ink-2:#A9B8AF; --muted:#A9B8AF;
  --brand:#F6F3EB; --brand-2:#FFFFFF; --on-accent:#0D3E2F;
  --bad:#F0A29A; --good:#F9B217;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0; min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(circle at 18% 18%, var(--ivory) 0%, var(--ivory-sunken) 12%, var(--foliage) 40%, var(--forest) 68%, var(--forest-deep) 100%);
  color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}

.card{
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; max-width:400px; padding:32px;
  background:rgba(246,243,235,.55); border:1px solid rgba(246,243,235,.35);
  border-radius:24px;
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(1.08);
  backdrop-filter:blur(22px) saturate(1.7) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 24px 60px -24px rgba(7,42,31,.7);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 38%, transparent 55%, rgba(249,178,23,.06) 100%);
  pointer-events:none;
}
.card > *{position:relative; z-index:1}

:root[data-theme="dark"] .card{
  background:rgba(13,62,47,.42); border-color:rgba(246,243,235,.18);
}

.logo{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0 auto 24px; color:var(--brand);
  font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.02em;
}
.logo img{width:64px; height:64px; display:block}

h1{margin:0; font-family:var(--display); font-size:28px; font-weight:700; letter-spacing:-.01em}
.lede{margin:12px 0 0; color:var(--ink-2); font-size:15px}

form{display:flex; flex-direction:column; gap:16px; margin-top:24px}
.field{display:flex; flex-direction:column; gap:4px}
label{font-size:13px; font-weight:600; color:var(--ink-2)}

input{
  min-height:44px; padding:0 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line-control); border-radius:999px;
}
input:focus-visible{outline:2px solid var(--cta); outline-offset:2px; border-color:var(--brand)}

/* The rule is stated up front rather than only on rejection. Making someone
   guess the policy, submit, and be told no is a worse experience than telling
   them first, and it produces weaker passwords as people retry minimally. */
.hint{font-size:13px; color:var(--muted); margin:0}

button{
  min-height:44px; border:1px solid var(--cta); border-radius:999px;
  background:var(--cta); color:var(--on-cta);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:background-color 160ms ease, border-color 160ms ease;
}
button:hover{background:var(--cta-2); border-color:var(--cta-2)}
button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.msg{
  margin:16px 0 0; padding:9px 14px; font-size:13px;
  color:var(--ink-2); background:var(--bg);
  border:1px solid var(--line); border-radius:12px;
}
.msg.err{border-color:var(--bad)}
.msg.ok{border-color:var(--good)}

.alt{margin-top:16px; font-size:13px; color:var(--muted)}
.alt a{color:var(--brand)}
.alt a:focus-visible{outline:2px solid var(--cta); outline-offset:2px}