/* ==========================================================================
   RECONNECTED — authentication and status screens
   Built on the same tokens and components as the member environment.
   Nothing here introduces a new colour, radius, curve or type size.
   ========================================================================== */

.authpage{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:1fr;
}
@media(min-width:960px){
  .authpage{grid-template-columns:minmax(0,46%) minmax(0,54%)}
}

/* ---- the moss side: wordmark, one calm line, the widening figure ---- */
.authside{
  position:relative; overflow:hidden;
  background:var(--moss); color:var(--inv-1);
  padding:22px 20px; display:flex; flex-direction:column; gap:18px;
}
@media(min-width:960px){
  .authside{padding:44px 48px; justify-content:space-between; min-height:100vh}
}
.authside__brand{display:flex; align-items:center; gap:12px; color:var(--inv-1); position:relative; z-index:2}
.authside__brand .wordmark{font-size:18px}
.authside__body{position:relative; z-index:2; max-width:26rem}
.authside__body h2{
  color:var(--inv-1); font-size:26px; line-height:1.12; letter-spacing:-.02em; font-weight:800;
  margin:0 0 12px;
}
@media(min-width:960px){ .authside__body h2{font-size:34px; letter-spacing:-.026em} }
.authside__body p{color:var(--inv-2); margin:0}
.authside__foot{position:relative; z-index:2; font-size:13px; color:var(--inv-3)}
.authside__fig{
  position:absolute; right:-24px; bottom:16px; width:250px; opacity:.5; pointer-events:none;
}
@media(max-width:959px){
  .authside__body{display:none}
  .authside__foot{display:none}
  .authside__fig{display:none}
  .authside{flex-direction:row; align-items:center; justify-content:space-between}
}

/* ---- the form side ---- */
.authmain{
  background:var(--paper); padding:28px 20px 40px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
@media(min-width:960px){ .authmain{padding:48px} }
.authcard{width:100%; max-width:400px}
.authcard__head{margin-bottom:24px}
.authcard__head h1{margin:12px 0 10px}
.authcard__head .lead{margin:0}

/* ---- fields ---- */
.field{margin-bottom:16px}
.field__label{
  display:block; font-size:14px; font-weight:700; letter-spacing:-.004em;
  color:var(--ink); margin-bottom:7px;
}
.field__wrap{position:relative; display:flex; align-items:center}
.field__input{
  width:100%; min-height:52px; padding:0 16px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-field);
  font-family:inherit; font-size:16px; color:var(--ink); outline:none;
  transition:border-color var(--close) var(--ease), background var(--close) var(--ease);
}
.field__input::placeholder{color:var(--ink-3)}
.field__input:hover{border-color:var(--line-3)}
.field__input:focus-visible{
  box-shadow:0 0 0 3px var(--rose-wash), 0 0 0 4px var(--rose); border-color:transparent;
}
.field--reveal .field__input{padding-right:82px}
.field__reveal{
  position:absolute; right:6px; min-height:40px; padding:0 12px;
  border:0; background:transparent; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:background var(--close) var(--ease), color var(--close) var(--ease);
}
.field__reveal:hover{background:var(--paper-2); color:var(--ink)}
.field__hint{display:block; font-size:13px; color:var(--ink-3); margin-top:7px}
.field__error{
  display:none; font-size:13px; font-weight:700; color:var(--rose); margin-top:7px;
}
.field[data-invalid="true"] .field__error{display:block}
.field[data-invalid="true"] .field__input{border-color:var(--rose)}

.field__row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px}
.field__row .field__label{margin-bottom:0}
.field__row a{font-size:13px; font-weight:700}

/* ---- notice: one shape for every non-field message ---- */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-choice);
  border:1px solid var(--line); background:var(--surface);
  font-size:14px; line-height:1.55; color:var(--ink-2); margin-bottom:20px;
}
.notice b{display:block; color:var(--ink); font-weight:700; margin-bottom:2px}
.notice__k{width:14px; height:2px; border-radius:2px; background:var(--ink-3); margin-top:10px; flex:none}
.notice--error{border-color:var(--rose); background:var(--rose-wash); color:var(--ink)}
.notice--error .notice__k{background:var(--rose)}
.notice--done{border-color:var(--tint-line); background:var(--moss-wash)}
.notice--done .notice__k{background:var(--moss-2)}
.notice[hidden]{display:none}

/* ---- Google ---- */
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:52px; padding:0 20px;
  background:var(--raised); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.005em; cursor:pointer;
  transition:background var(--close) var(--ease), border-color var(--close) var(--ease);
}
.gbtn:hover:not([disabled]){background:var(--paper-2); border-color:var(--line-3)}
.gbtn:active:not([disabled]){transform:translateY(1px)}
.gbtn[disabled]{opacity:.62; cursor:not-allowed}
.gbtn svg{width:18px; height:18px; flex:none}

.divider{
  display:flex; align-items:center; gap:14px; margin:20px 0;
  font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3);
}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}

/* ---- submit + loading ---- */
.btn--block{width:100%}
.btn[data-loading="true"]{pointer-events:none}
.spinner{
  width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none; border-top-color:currentColor; opacity:.5}
}

.authfoot{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 0; align-items:center;
  font-size:14px; color:var(--ink-3);
}
.authfoot a{font-weight:700}

/* ---- status pages (session expired, access denied, 404) ---- */
.status{
  position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; text-align:left;
}
.statuscard{width:100%; max-width:520px}
.statuscard .caps{margin-bottom:14px}
.statuscard h1{margin-bottom:14px}
.statuscard .lead{margin-bottom:26px; max-width:44ch}
.statuscard__actions{display:flex; flex-wrap:wrap; gap:10px}
.statushead{
  position:absolute; top:0; left:0; right:0; padding:20px;
  display:flex; align-items:center; gap:12px;
}