/* login.css — page-specific layout for the sign-in page (cleaning/templates/login.html).
   The auth gate. It reuses the marketing chrome (nav + footer markup from the SSI
   partials, styled by site.css) but is otherwise its own thing: a centred sign-in
   card, a unified icon+label field with a password reveal, and a translucent hero
   nav with underlined links. Chrome + body grain/glow come from site.css; this
   file holds the card, the nav/link variant and the few preserving overrides.
   Cascade: tokens -> base -> site -> animations -> login.css. */

/* The marketing body treatment (site.css) is light (300); the sign-in card keeps
   normal-weight text. Everything else in that treatment (grain/glow, flex column)
   is inherited as-is. This page has no .wrap, so sections raise themselves above
   the fixed background layers individually (.main and footer below, nav in site.css). */
body{font-weight:400}
.container{max-width:1180px;padding:0 28px}
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:96px 24px 24px;width:100%;position:relative;z-index:1}
footer{position:relative;z-index:1}

/* ---------- hero nav variant ---------- */
/* Translucent until scrolled (site.css nav is opaque), with underlined links in a
   dimmer resting colour. Only the differing properties are overridden here. */
nav{background:rgba(15,14,12,.55);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.nav-links a{color:var(--ink-dim);position:relative}
.nav-links a.hide-sm::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-links a.hide-sm:hover{color:var(--ink-soft)}
.nav-links a.hide-sm:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.nav-links a.hide-sm::after{transition:none}}

/* ---------- sign-in card ---------- */
.card{width:100%;max-width:380px;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:30px 26px;
  opacity:0;animation:rise .9s .1s forwards}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.card{animation:none;opacity:1}}
h1{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.02em;margin-bottom:4px}
h1 span{color:var(--gold)}
.sub{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.92rem;margin-bottom:22px}
.sub svg{width:16px;height:16px;color:var(--gold);flex:0 0 auto}
label{display:block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 5px}
input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:11px 12px;border-radius:4px;font-size:.95rem;font-family:var(--sans)}
input:focus{outline:none;border-color:var(--gold)}
button{width:100%;margin-top:22px;background:var(--gold);color:var(--bg);border:none;font-weight:600;
  padding:12px;border-radius:4px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:var(--sans)}
button:disabled{opacity:.5;cursor:default}
.err{margin-top:14px;color:var(--red);font-size:.8rem;min-height:1.1em;text-align:center}

/* one unified field: icon | thin gold divider | (small label + value) | eye */
.field{display:flex;align-items:center;gap:11px;background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:9px 12px;margin-top:12px;
  transition:border-color .2s}
.field:focus-within{border-color:var(--gold)}
.field .ic{width:20px;height:20px;flex:0 0 auto;color:var(--ink-dim);display:flex}
.field .ic svg{width:20px;height:20px}
.field:focus-within .ic{color:var(--gold)}
.fbody{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:11px}
.flabel{display:block;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:2px;pointer-events:none}
.field:focus-within .flabel{color:var(--gold)}
.field input{width:100%;background:none;border:none;padding:0;color:var(--ink);
  font-size:1rem;font-family:var(--sans)}
.field input:focus{outline:none}
/* kill the browser autofill white box so the value stays on the dark field */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--bg) inset;box-shadow:0 0 0 40px var(--bg) inset;
  transition:background-color 9999s ease-in-out 0s}
.eye{flex:0 0 auto;width:32px!important;height:32px;margin:0!important;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  background:none!important;border:none!important;color:var(--ink-dim);cursor:pointer}
.eye:hover{color:var(--gold)}
.eye:disabled{opacity:1;cursor:pointer}
.eye svg{width:19px;height:19px}
.remember{display:flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.8rem;color:var(--ink-soft);cursor:pointer;user-select:none;
  text-transform:none;letter-spacing:0}
.remember input{width:16px;height:16px;accent-color:var(--gold);
  margin:0;flex:0 0 auto;cursor:pointer}