/* Sign in and sign up.

   Same tokens as the partner dashboard so the three surfaces read as one
   product: warm cream ground, Lora headings, SF Pro UI, gold as the only
   accent. Structure comes from hairlines rather than from boxes and fills,
   which is why there is exactly one rule under the header and two framing the
   column. Scoped under .auth-shell / .standalone-body so nothing here can
   reach the signed-in application. */

.auth-shell{
  --a-cream:#F7F3E9;
  --a-card:#FFFFFF;
  --a-ink:#151412;
  --a-ink-2:#5F5E58;
  --a-ink-3:#8A8679;
  --a-line:#E7E1D2;
  --a-line-soft:#F0EBDD;
  --a-gold:#C4A35A;
  --a-gold-deep:#AD8C43;
  --a-gold-text:#7C6126;
  --a-sans:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --a-serif:'Lora',Georgia,"Times New Roman",serif;
  --a-art:none;   /* set inline by the view to the fingerprinted asset */
  --a-gutter:max(40px,calc(50% - 604px));   /* where the framing rules sit */
  --a-inset:26px;                            /* how far content sits inside them */

  position:fixed; inset:0; z-index:40;
  display:grid; grid-template-rows:auto 1fr;
  background:var(--a-cream) var(--a-art) right center / cover no-repeat;
  font-family:var(--a-sans); color:var(--a-ink);
  overflow-y:auto;
}
/* The artwork runs full bleed behind everything and the card sits on top of it,
   which is the arrangement in the reference. The card is opaque with a shadow,
   so legibility comes from the card rather than from clearing half the page. */
/* Header, then everything below it. The framing rules are drawn on this
   wrapper so they reach the bottom of the screen rather than stopping where
   the form column ends. */
.auth-shell .auth-below{
  position:relative; z-index:2;
  display:grid; grid-template-rows:1fr auto; min-height:0;
}
.auth-shell .auth-body{position:relative; display:flex; min-height:0}

.auth-shell .auth-head{
  position:relative; z-index:2;
  padding:22px calc(var(--a-gutter) + var(--a-inset));
  border-bottom:1px solid var(--a-line);
}
.auth-shell .auth-brand{display:inline-flex; align-items:center; gap:4px; text-decoration:none}
.auth-shell .auth-brand .am{width:30px; height:auto; display:block}
.auth-shell .auth-brand .aw{height:22px; width:auto; display:block}

.auth-shell .auth-main{
  position:relative; z-index:2; flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:48px 32px;
}

.auth-shell .auth-card{
  width:100%; max-width:412px;
  background:var(--a-card);
  border:1px solid var(--a-line);
  border-radius:18px;
  padding:34px 34px 0;
  box-shadow:0 1px 2px rgba(60,50,20,.04),0 24px 60px -30px rgba(60,50,20,.30);
}
.auth-shell .auth-card h1{
  font-family:var(--a-serif); font-size:23px; font-weight:500;
  letter-spacing:-.01em; line-height:1.25; margin:0 0 22px;
}

.auth-shell .auth-form{display:flex; flex-direction:column; gap:16px}
.auth-shell .af-field{display:flex; flex-direction:column; gap:6px}
.auth-shell .af-label-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.auth-shell .af-label{font-size:13px; font-weight:600; color:var(--a-ink-2)}
.auth-shell .af-input{
  width:100%; padding:10px 12px;
  background:var(--a-card);
  border:1px solid var(--a-line); border-radius:10px;
  font-family:var(--a-sans); font-size:14.5px; color:var(--a-ink);
  box-shadow:0 1px 2px rgba(60,50,20,.05);
  transition:border-color .12s, box-shadow .12s;
}
.auth-shell .af-input:focus{
  outline:none; border-color:var(--a-gold);
  box-shadow:0 0 0 3px rgba(196,163,90,.22);
}
.auth-shell .af-link{font-size:13px; font-weight:600; color:var(--a-gold-text); text-decoration:none}
.auth-shell .af-link:hover{text-decoration:underline}

.auth-shell .af-check{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--a-ink-2); cursor:pointer}
.auth-shell .af-check input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:0; flex:none;
  border:1.5px solid #D9D2C0; border-radius:6px;
  background:var(--a-card);
  display:grid; place-content:center; cursor:pointer;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.auth-shell .af-check input[type=checkbox]::before{
  content:""; width:11px; height:11px; background:#FFFDF8;
  transform:scale(0); transition:transform .12s ease;
  clip-path:polygon(14% 44%, 0 62%, 40% 100%, 100% 22%, 84% 6%, 38% 66%);
}
.auth-shell .af-check input[type=checkbox]:checked{
  background:var(--a-gold); border-color:var(--a-gold);
}
.auth-shell .af-check input[type=checkbox]:checked::before{transform:scale(1)}
.auth-shell .af-check input[type=checkbox]:hover{border-color:var(--a-gold)}
.auth-shell .af-check input[type=checkbox]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(196,163,90,.28);
}

.auth-shell .af-submit{
  width:100%; margin-top:2px; padding:11px 16px;
  background:var(--a-gold); border:1px solid var(--a-gold);
  border-radius:10px;
  font-family:var(--a-sans); font-size:14.5px; font-weight:600; color:#FFFDF8;
  cursor:pointer; transition:background .14s, border-color .14s;
}
.auth-shell .af-submit:hover{background:var(--a-gold-deep); border-color:var(--a-gold-deep)}
.auth-shell .af-submit:focus-visible{outline:2px solid var(--a-gold-deep); outline-offset:2px}

/* A labelled rule, the same device as the framing hairlines. */
.auth-shell .af-or{position:relative; text-align:center; margin:22px 0 14px}
.auth-shell .af-or::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--a-line)}
.auth-shell .af-or span{position:relative; padding:0 10px; background:var(--a-card);
  font-size:12.5px; color:var(--a-ink-2)}

.auth-shell .auth-card form.button_to{margin:0; width:100%}
.auth-shell .af-alt{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 16px; background:var(--a-card);
  border:1px solid var(--a-line); border-radius:10px;
  font-family:var(--a-sans); font-size:14px; font-weight:600; color:var(--a-ink);
  box-shadow:0 1px 2px rgba(60,50,20,.05);
  cursor:pointer; transition:background .12s, border-color .12s;
}
.auth-shell .af-alt:hover{background:#FBF8F0; border-color:#DAD3BE}
.auth-shell .af-alt img{display:block}

.auth-shell .auth-card-foot{
  margin:22px -34px 0; padding:16px 34px;
  border-top:1px solid var(--a-line);
  background:#FBF9F3;
  border-radius:0 0 17px 17px;
  text-align:center; font-size:13.5px; color:var(--a-ink-2);
}

.auth-shell .auth-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:22px;
  padding:18px calc(var(--a-gutter) + var(--a-inset));
  font-size:12.5px; color:var(--a-ink-2);
}
.auth-shell .auth-foot .af-muted{color:var(--a-ink-2); text-decoration:none}
.auth-shell .auth-foot .af-muted:hover{color:var(--a-ink); text-decoration:underline}

@media(max-width:640px){
  /* A phone sees a narrow slice of a landscape image, and anchored right that
     slice is solid gold: the wordmark is a fixed tan image and the copyright is
     muted grey, so neither can be recoloured to survive it. Anchoring left
     solves the contrast by losing the ribbon entirely. So the ribbon stays and
     the two chrome bars get a cream scrim instead, which is the same device the
     sign-up footer uses. */
  .auth-shell{--a-inset:0px}
  .auth-shell .auth-head,
  .auth-shell .auth-foot{
    background:rgba(247,243,233,.90);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .auth-shell .auth-foot{border-top:1px solid var(--a-line)}
  .auth-shell .auth-head,.auth-shell .auth-foot{padding-left:20px; padding-right:20px}
  .auth-shell .auth-card{padding:26px 22px 0; border-radius:16px}
  .auth-shell .auth-card-foot{margin:20px -22px 0; padding:15px 22px}
}

/* The framing hairlines: same measure as the header and the footer, running
   from the header rule to the bottom edge. Structure without a box. */
.auth-shell .auth-below::before,
.auth-shell .auth-below::after{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--a-line); pointer-events:none;
}
.auth-shell .auth-below::before{left:var(--a-gutter)}
.auth-shell .auth-below::after{right:var(--a-gutter)}
@media(max-width:900px){
  .auth-shell .auth-below::before,.auth-shell .auth-below::after{display:none}
}