/* ═══════════════════════════════════════════════════════════════════════════
   SKOOL OF DROOL — sign-in pages (login, forgot, reset, password)

   Every colour, radius, font, weight and measure comes from /tokens.css; this
   file picks none of its own. The markup is plain and semantic (header, main,
   one form per page, label + input pairs, one status region), so a re-skin is a
   change here and in tokens.css, not in the pages. Coloured as Version 2 of
   Viviana's dashboard is (22 Oct 2026): the pastel, the wash and the deep shade,
   with ink on every pastel and never white.

   Mobile first: one column at the --pw measure, 44px touch targets (--tap),
   16px inputs so iOS does not zoom on focus.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-b);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--hue-deep);font-weight:var(--fw-strong);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── header: the chakra bar and the round logo ───────────────────────────── */
.auth-header{position:relative;padding:18px var(--pp) 0}
.auth-header::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--chakra-bar)}
.auth-header__inner{max-width:var(--pw);margin:0 auto;display:flex;align-items:center;gap:10px;padding-top:6px}
.auth-header__logo{width:40px;height:40px;border-radius:50%;object-fit:cover}
.auth-header__name{font-family:var(--font-d);font-size:1.2rem;font-weight:var(--fw-display);color:var(--ink)}

/* ── the card ────────────────────────────────────────────────────────────── */
.auth-main{max-width:calc(480px + 2 * var(--pp));margin:0 auto;padding:28px var(--pp) 64px}
/* Version 2's soft rainbow behind the form, a ring of the pastel round it, and
   white fields on top: ink and ink-mid read on every stop of the gradient
   (11.3:1 and 6.9:1 or better). */
.auth-card{background:var(--soft-rainbow);border-radius:var(--r-l);padding:26px 22px;
  box-shadow:inset 0 0 0 1.5px var(--hue),var(--sh-m)}
/* The bolder weight is a little wider, and "Forgot your password?" would tip onto
   a second line on a 390px phone where it fitted before. A touch more negative
   tracking (-.01em to -.025em) keeps it on its line without changing its size. */
.auth-card h1{font-family:var(--font-d);font-weight:var(--fw-display);font-size:2rem;line-height:1.15;margin:0 0 8px;letter-spacing:-.025em}
.auth-card h1 em{font-style:italic;color:var(--hue-deep)}
.auth-lead{color:var(--ink-mid);margin:0 0 20px}

/* ── fields ──────────────────────────────────────────────────────────────── */
.auth-field{margin:0 0 16px}
.auth-field label{display:block;font-size:.9rem;font-weight:var(--fw-strong);margin:0 0 6px}
.auth-field input{width:100%;min-height:var(--tap);font:inherit;font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid var(--hue-deep);border-radius:var(--r-s);padding:10px 12px}
.auth-field input::placeholder{color:var(--ink-mid);opacity:.85}
.auth-field input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--c-throat)}
.auth-hint{font-size:.85rem;color:var(--ink-mid);margin:6px 0 0}

/* Password with its show/hide button inside the same row. */
.auth-pw{display:flex;align-items:stretch;gap:6px}
.auth-pw input{flex:1 1 auto;min-width:0}
.auth-toggle{flex:0 0 auto;min-height:var(--tap);min-width:var(--tap);padding:0 14px;font:inherit;font-size:.88rem;
  font-weight:var(--fw-strong);color:var(--hue-deep);background:var(--white);border:none;border-radius:var(--r-s);
  box-shadow:inset 0 0 0 1.5px var(--hue-deep);cursor:pointer}

/* ── buttons and links ───────────────────────────────────────────────────── */
/* The one button on each page is mint, Version 2's colour for "do it": the pastel
   with ink on it and a deep green ring (8.4:1 for the word). Working on it, it
   becomes a quiet outline with real ink in it rather than a faded fill, which is
   what the white-on-teal version did (4.2:1 at .6 opacity). */
.auth-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);
  margin:6px 0 0;padding:12px 22px;font:inherit;font-weight:var(--fw-strong);color:var(--ink);background:var(--c-heart);
  border:none;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--d-heart);cursor:pointer;
  transition:opacity .2s var(--ease)}
.auth-btn:hover{opacity:.92}
.auth-btn[disabled]{background:var(--white);color:var(--ink-mid);box-shadow:inset 0 0 0 1.5px var(--line);
  opacity:1;cursor:progress}
.auth-links{margin:18px 0 0;padding:0;list-style:none;font-size:.95rem}
.auth-links li{margin:0 0 10px}
.auth-links a{display:inline-block;padding:4px 0}

/* ── messages ────────────────────────────────────────────────────────────── */
.auth-msg{padding:12px 15px;border-radius:var(--r-m);font-size:.95rem;margin:14px 0 0}
.auth-msg:empty{display:none}
.auth-msg.ok{background:var(--ok-bg);border-left:4px solid var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
.auth-msg.bad{background:var(--error-bg);border-left:4px solid var(--error);box-shadow:inset 0 0 0 1.5px var(--c-root)}
.auth-msg.info{background:var(--white);color:var(--ink-mid);box-shadow:inset 4px 0 0 var(--hue)}

.auth-foot{text-align:center;color:var(--ink-mid);font-size:.9rem;margin:28px 0 0}
.auth-foot a{color:var(--ink-mid);white-space:nowrap}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── the front door (3 Nov 2026) ─────────────────────────────────────────────
   "First time here? Set up your password" leads on the sign-in page: bigger,
   and the warm solar pastel (ink on it, its deep ring) so it is not mistaken
   for the mint Sign in button below. A link styled as a button keeps no
   underline. A quiet rule with words in it separates the two. */
a.auth-btn{text-decoration:none}
.auth-btn--lead{min-height:56px;font-size:1.06rem;margin:4px 0 0;background:var(--c-solar);
  box-shadow:inset 0 0 0 1.5px var(--d-solar)}
.auth-or{display:flex;align-items:center;gap:12px;margin:26px 0 14px;color:var(--ink-mid);
  font-size:.92rem;font-weight:var(--fw-strong)}
.auth-or::before,.auth-or::after{content:'';flex:1 1 auto;height:1.5px;background:var(--line)}
.auth-links .auth-small{font-size:.88rem}
.auth-links .auth-small a{font-weight:400}
.auth-note{font-size:.88rem;color:var(--ink-mid);margin:-8px 0 16px}

/* /forgot after a send (3 Nov 2026): the address they typed, and "try a
   different email" as a quiet link-like button with a full touch target. */
.auth-sent{margin:12px 0 0;font-size:.95rem;color:var(--ink);overflow-wrap:anywhere}
.auth-linkbtn{display:inline-flex;align-items:center;min-height:var(--tap);margin:2px 0 0;padding:0;font:inherit;
  font-size:.95rem;font-weight:var(--fw-strong);color:var(--hue-deep);background:none;border:none;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (min-width:560px){
  .auth-card{padding:34px 34px}
  .auth-card h1{font-size:2.3rem}
}