/* ============================================================
   Rowmesh demo — css/auth.css
   Shell for index.html / login.html / signup.html /
   forgot-password.html / reset-password.html
   Tokens only. No hex literals, no at-rule includes, no network calls.
   ============================================================ */

/* ---------- local semantic tokens ---------- */
:root{
  --auth-danger:var(--red-600);
  --auth-danger-ink:var(--red-700);
  --auth-danger-soft:color-mix(in srgb, var(--red-600) 7%, transparent);
  --auth-danger-line:color-mix(in srgb, var(--red-600) 45%, transparent);
  --auth-ok:var(--green-600);
  --auth-ok-ink:var(--green-700);
  --auth-ok-soft:color-mix(in srgb, var(--green-600) 8%, transparent);
  --auth-ok-line:color-mix(in srgb, var(--green-600) 40%, transparent);
  --auth-warn:var(--amber-600);
  --auth-field-bg:var(--surface);
  --auth-toast-bg:var(--neutral-900);
  --auth-toast-ink:var(--neutral-50);
  --auth-toast-line:var(--neutral-800);
  --auth-ring:color-mix(in srgb, var(--primary) 22%, transparent);
  --auth-gutter:14px;
}
:root[data-theme="dark"]{
  --auth-danger:var(--red-400);
  --auth-danger-ink:var(--red-400);
  --auth-danger-soft:color-mix(in srgb, var(--red-400) 12%, transparent);
  --auth-danger-line:color-mix(in srgb, var(--red-400) 50%, transparent);
  --auth-ok:var(--green-400);
  --auth-ok-ink:var(--green-400);
  --auth-ok-soft:color-mix(in srgb, var(--green-400) 12%, transparent);
  --auth-ok-line:color-mix(in srgb, var(--green-400) 45%, transparent);
  --auth-warn:var(--amber-400);
  --auth-field-bg:var(--surface-raised);
  --auth-toast-bg:var(--surface-raised);
  --auth-toast-ink:var(--ink);
  --auth-toast-line:var(--line);
}

html,body{height:100%}
body.auth-body{background:var(--bg);font-family:var(--family-product);font-size:15px;line-height:1.5}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   1. Shell
   ============================================================ */
.auth{
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:stretch;
}
@media (min-width:1440px){ .auth{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} }

.auth-pane{
  display:flex;flex-direction:column;min-width:0;
  padding:26px clamp(20px,4.5vw,64px) 26px;
}
.auth-pane__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 auto}
.auth-pane__body{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:32px 0 22px}
.auth-pane__foot{flex:0 0 auto;color:var(--ink-faint);font-size:12.5px;line-height:1.6;max-width:46ch}
.auth-pane__foot a{color:var(--ink-muted)}

.auth-card{width:100%;max-width:412px}

/* wordmark */
.wordmark{display:inline-flex;border-radius:var(--radius-sm)}
.wordmark svg,.wordmark img{display:block;height:24px;width:auto}
:root[data-theme="dark"] .auth-pane .wordmark img{filter:invert(1)}

.auth-pane__top .pill-link{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius-full);
  color:var(--ink-muted);text-decoration:none;font-size:13px;font-weight:500;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.auth-pane__top .pill-link:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-hover)}

/* ============================================================
   2. Headings / links
   ============================================================ */
.auth-title{
  font-family:var(--family-display);font-weight:600;
  font-size:clamp(28px,3.1vw,35px);line-height:1.08;letter-spacing:-.022em;
  margin:0 0 10px;color:var(--ink);
}
.auth-sub{margin:0 0 26px;color:var(--ink-muted);font-size:14.5px;line-height:1.6;max-width:40ch}
.auth-alt{margin:22px 0 0;font-size:14px;color:var(--ink-muted);text-align:center}

a{color:var(--link)}
.auth-alt a,.link{color:var(--primary-text);font-weight:500;text-decoration:none;border-radius:4px}
.auth-alt a:hover,.link:hover{text-decoration:underline}

.link-btn{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--primary-text);font-size:13px;font-weight:500;border-radius:4px;
}
.link-btn:hover{text-decoration:underline}

/* ============================================================
   3. Buttons
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:var(--radius-md);
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease;
}
.btn--block{width:100%}
.btn:disabled{cursor:default}

.btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-xs)}
.btn--primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-sm)}
.btn--primary:active:not(:disabled){transform:translateY(1px)}
.btn--primary:disabled{opacity:.72}

.btn--demo{
  background:var(--primary-soft);color:var(--primary-text);
  border-color:color-mix(in srgb, var(--primary) 28%, transparent);
}
.btn--demo:hover:not(:disabled){
  background:color-mix(in srgb, var(--primary) 18%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 46%, transparent);
}
.btn--demo:active:not(:disabled){transform:translateY(1px)}
.btn--demo:disabled{opacity:.72}
.btn--demo svg{flex:0 0 auto}

/* busy state: spinner replaces the leading icon, label stays readable */
.btn__spinner{
  display:none;flex:0 0 16px;width:16px;height:16px;border-radius:var(--radius-full);
  border:2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color:currentColor;
}
.btn[aria-busy="true"] .btn__spinner{display:block;animation:auth-spin .62s linear infinite}
.btn[aria-busy="true"] > svg{display:none}

@keyframes auth-spin{to{transform:rotate(360deg)}}

/* ============================================================
   4. SSO row + divider
   ============================================================ */
.sso-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.sso{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 12px;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);
  font-family:inherit;font-size:14px;font-weight:500;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.sso:hover{border-color:var(--line-strong);background:var(--surface-hover);box-shadow:var(--shadow-xs)}
.sso svg{flex:0 0 auto;display:block}

/* brand glyph fills, token-driven (no hex) */
.g-b{fill:var(--blue-500)} .g-g{fill:var(--green-600)} .g-y{fill:var(--amber-400)} .g-r{fill:var(--red-600)}
.ms-r{fill:var(--red-600)} .ms-g{fill:var(--green-600)} .ms-b{fill:var(--blue-500)} .ms-y{fill:var(--amber-400)}

.sso-note{
  margin:0 0 16px;padding:10px 12px;border-radius:var(--radius);
  background:var(--primary-soft);color:var(--primary-text);
  font-size:13px;line-height:1.5;
}
.sso-note:empty{display:none}

.divider{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:var(--ink-faint);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider--spaced{margin-top:22px}

/* ============================================================
   5. Fields
   ============================================================ */
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form[hidden]{display:none}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field__label{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.003em}
.field__control{position:relative;display:flex;align-items:center}

.field__input{
  width:100%;min-height:46px;padding:0 14px;
  background:var(--auth-field-bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-md);
  font-family:inherit;font-size:14.5px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field__control--action .field__input{padding-right:46px}
.field__input::placeholder{color:var(--ink-faint)}
.field__input:hover{border-color:var(--line-strong)}
.field__input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--auth-ring)}
.field__input:focus-visible{outline:none}

.field.is-invalid .field__input{border-color:var(--auth-danger-line);background:var(--auth-danger-soft)}
.field.is-invalid .field__input:focus{
  border-color:var(--auth-danger);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--auth-danger) 22%, transparent);
}

.field__action{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;cursor:pointer;
  background:none;border:0;border-radius:var(--radius-sm);color:var(--ink-faint);
  transition:color .15s ease,background .15s ease;
}
.field__action:hover{color:var(--ink);background:var(--surface-hover)}
/* [hidden] is not honoured on SVG by every UA stylesheet — be explicit */
.field__action svg[hidden]{display:none}

.field__err{margin:0;font-size:12.5px;line-height:1.45;color:var(--auth-danger-ink);min-height:0}
.field__err:empty{display:none}
.field__note{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.field__note:empty{display:none}

/* ---------- strength meter ---------- */
.strength{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.strength__track{display:flex;gap:5px}
.strength__track i{flex:1;height:4px;border-radius:var(--radius-full);background:var(--line);transition:background .22s ease}
.strength__label{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-faint)}

.strength[data-level="1"] .strength__track i:nth-child(1){background:var(--auth-danger)}
.strength[data-level="2"] .strength__track i:nth-child(-n+2){background:var(--auth-warn)}
.strength[data-level="3"] .strength__track i{background:var(--auth-ok)}
.strength[data-level="1"] .strength__label{color:var(--auth-danger-ink)}
.strength[data-level="2"] .strength__label{color:var(--auth-warn)}
.strength[data-level="3"] .strength__label{color:var(--auth-ok)}

/* ---------- checkbox ---------- */
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none}
.check__input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 18px;width:18px;height:18px;
  position:relative;top:1px;cursor:pointer;
  background:var(--auth-field-bg);border:1px solid var(--line-strong);border-radius:5px;
  transition:background .15s ease,border-color .15s ease;
}
.check__input:hover{border-color:var(--primary)}
.check__input:checked{background:var(--primary);border-color:var(--primary)}
.check__input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--on-primary);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check__text{font-size:13.5px;color:var(--ink);line-height:1.45}
.check__text small{display:block;margin-top:3px;color:var(--ink-faint);font-size:12.5px;line-height:1.5}

.row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- inline disclosure note ---------- */
.note{
  margin:0;padding:12px 14px;border-radius:var(--radius);
  background:var(--bg-sunken);border:1px solid var(--line);
  color:var(--ink-muted);font-size:13px;line-height:1.55;
}
.note[hidden]{display:none}
.note:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.note strong{color:var(--ink);font-weight:600}

/* ---------- form-level error ---------- */
.form-error{
  display:flex;align-items:flex-start;gap:9px;
  margin:0;padding:11px 13px;border-radius:var(--radius);
  background:var(--auth-danger-soft);border:1px solid var(--auth-danger-line);
  color:var(--auth-danger-ink);font-size:13.5px;line-height:1.5;
}
.form-error[hidden]{display:none}
.form-error svg{flex:0 0 auto;margin-top:1px}

/* ---------- form-level success (email confirmed, password updated) ---------- */
.form-ok{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 18px;padding:11px 13px;border-radius:var(--radius);
  background:var(--auth-ok-soft);border:1px solid var(--auth-ok-line);
  color:var(--auth-ok-ink);font-size:13.5px;line-height:1.5;
}
.form-ok[hidden]{display:none}
.form-ok:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.form-ok svg{flex:0 0 auto;margin-top:1px}

/* ---------- "check your inbox" panel ---------- */
.sent{display:flex;flex-direction:column;gap:16px}
.sent[hidden]{display:none}
.sent .btn[hidden]{display:none}
.sent:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:var(--radius)}
.sent__icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);
  background:var(--primary-soft);color:var(--primary-text);
}
.sent__title{margin:0;font-family:var(--family-display);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sent__text{margin:0;color:var(--ink-muted);font-size:14.5px;line-height:1.6}
.sent__email{color:var(--ink);font-weight:600;word-break:break-all}
.sent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14px;color:var(--ink-muted)}
.link-btn:disabled{color:var(--ink-faint);text-decoration:none;cursor:default}
.sent__actions .link-btn{font-size:14px}
.auth-form > .link-btn{align-self:flex-start;font-size:13.5px}
.auth-form > .link-btn[hidden]{display:none}

/* ---------- demo credentials helper ---------- */
.creds{
  margin:12px 0 0;padding:11px 13px;border-radius:var(--radius);
  background:var(--bg-sunken);border:1px dashed var(--line-strong);
  color:var(--ink-muted);font-size:12.5px;line-height:1.7;
}
.creds b{color:var(--ink);font-weight:600}
.creds code{font-family:var(--family-mono);font-size:12px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1px 5px}

/* ============================================================
   6. Brand panel (decorative, aria-hidden)
   ============================================================ */
.brand{
  position:relative;overflow:hidden;min-width:0;
  margin:var(--auth-gutter) var(--auth-gutter) var(--auth-gutter) 0;
  border-radius:var(--radius-xl);
  color:var(--neutral-0);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:clamp(32px,3.6vw,52px);
  background:linear-gradient(152deg,
    var(--violet-700) 0%,
    var(--violet-800) 34%,
    var(--violet-900) 66%,
    var(--violet-950) 100%);
}
.brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 16% 4%, color-mix(in srgb, var(--violet-400) 58%, transparent), transparent 72%),
    radial-gradient(48% 42% at 96% 102%, color-mix(in srgb, var(--violet-500) 52%, transparent), transparent 74%);
}
.brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(color-mix(in srgb, var(--neutral-0) 42%, transparent) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, var(--black) 28%, transparent 88%);
  mask-image:linear-gradient(to bottom, transparent, var(--black) 28%, transparent 88%);
}
.brand > *{position:relative;z-index:1}

.brand__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand__head img{display:block;height:26px;width:auto;filter:brightness(0) invert(1)}
.brand__badge{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;
  border-radius:var(--radius-full);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in srgb, var(--neutral-0) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--neutral-0) 20%, transparent);
  color:color-mix(in srgb, var(--neutral-0) 92%, transparent);
}
.brand__badge i{width:6px;height:6px;border-radius:var(--radius-full);background:var(--green-400);display:block}

.brand__mid{display:flex;flex-direction:column;gap:30px;max-width:30ch}
.brand__prop{
  font-family:var(--family-display);font-weight:500;
  font-size:clamp(26px,2.5vw,34px);line-height:1.18;letter-spacing:-.02em;margin:0;
  color:var(--neutral-0);
}
.brand__prop em{font-style:normal;color:var(--violet-300)}

.brand__quote{
  margin:0;padding:22px 24px;border-radius:var(--radius-lg);max-width:38ch;
  background:color-mix(in srgb, var(--neutral-0) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--neutral-0) 17%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.brand__quote p{margin:0 0 16px;font-size:15px;line-height:1.6;color:color-mix(in srgb, var(--neutral-0) 94%, transparent)}
.brand__quote footer{display:flex;align-items:center;gap:11px}
.brand__avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:var(--radius-full);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:color-mix(in srgb, var(--neutral-0) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--neutral-0) 26%, transparent);
  color:var(--neutral-0);
}
.brand__cite{font-style:normal;font-size:12.5px;line-height:1.45;color:color-mix(in srgb, var(--neutral-0) 72%, transparent)}
.brand__cite b{display:block;font-weight:600;font-size:13px;color:color-mix(in srgb, var(--neutral-0) 96%, transparent)}

.brand__foot{display:flex;flex-direction:column;gap:14px}
.brand__eyebrow{
  margin:0;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb, var(--neutral-0) 58%, transparent);
}
.brand__logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.brand__logo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--family-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  color:color-mix(in srgb, var(--neutral-0) 80%, transparent);
}
.brand__logo svg{opacity:.85}

/* ============================================================
   7. Toasts
   ============================================================ */
.toasts{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:9px;align-items:center;
  width:min(440px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:12px 14px;border-radius:var(--radius-md);
  background:var(--auth-toast-bg);color:var(--auth-toast-ink);
  border:1px solid var(--auth-toast-line);box-shadow:var(--shadow-lg);
  font-size:13.5px;line-height:1.5;pointer-events:auto;
  animation:toast-in .2s ease both;
}
.toast svg{flex:0 0 auto;margin-top:1px;color:var(--violet-300)}
.toast.is-leaving{animation:toast-out .18s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}

/* ============================================================
   8. index.html redirect shim — never flashes real content
   ============================================================ */
body.redirect-body{
  display:grid;place-items:center;min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--ink-faint);
}
.redirect-msg{
  margin:0;font-size:13.5px;color:var(--ink-faint);
  opacity:0;animation:redirect-in .25s ease 650ms forwards;
}
.redirect-noscript{text-align:center;font-size:14px;color:var(--ink-muted);padding:24px}
.redirect-noscript a{color:var(--primary-text);font-weight:500}
@keyframes redirect-in{to{opacity:1}}

/* ============================================================
   9. Responsive
   ============================================================ */
@media (max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .brand{display:none}
  .auth-pane{padding:22px 20px 30px}
  .auth-pane__body{padding:26px 0 20px;align-items:flex-start}
  .auth-card{margin:0 auto}
  .auth-pane__foot{max-width:none;text-align:center;margin:0 auto}
}
@media (max-width:420px){
  .sso-row{grid-template-columns:1fr}
  .auth-title{font-size:26px}
}

/* ============================================================
   10. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .btn:active:not(:disabled){transform:none}
}