/* FAMA — sign-in screens (Create account, Log in, Forgot / Reset password).
   Blueprint: a split-screen page with a showcase panel and the form beside it.
   The showcase is the one purple block, with the pattern as a band along its bottom edge. */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);margin-top:var(--s6);align-items:stretch}
.au-show{background:var(--purple);color:var(--white);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.au-show .au-in{padding:var(--s7);flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6)}
.au-show h1{font-family:var(--font-display);font-weight:600;font-size:clamp(52px,6vw,var(--t-display));line-height:1}
[dir=rtl] .au-show h1{font-family:var(--ar);font-weight:700;font-size:clamp(44px,5vw,var(--t-display-ar));line-height:1.25}
.au-show p{font-weight:600;font-size:20px;max-width:24ch;margin-top:var(--s4)}
.au-show .who{display:flex;gap:var(--s3);align-items:center;background:var(--white);color:var(--ink);border-radius:var(--radius);padding:var(--s4);max-width:360px}
.au-show .who b{display:block;font-weight:600}
.au-show .who span{font-size:var(--t-meta);color:var(--grey)}
.au-show .band{height:48px;background:url("../img/pattern-stars.png") repeat-x;background-size:auto 100%}
/* photo (6 Oct 2026): the studio photo fills the lower part; the logo star sits on the seam */
.au-show{position:relative}
.au-show .au-in{position:relative;z-index:2}
.au-photo{height:260px;flex:none;background:#CBBBA8 url("../img/banners/signin.jpg?v=2") center/cover no-repeat}
.au-show .hstar{position:absolute;z-index:1;height:150px;right:28px;bottom:190px;fill:var(--yellow)}
.pane{background:var(--white);border:var(--border);border-radius:var(--radius);padding:var(--s7);display:flex;flex-direction:column;justify-content:center}
.pane .h2{margin-top:var(--s1)}
.pane .sub{color:var(--grey);margin-top:var(--s2)}
.pane form{margin-top:var(--s6)}
.pane .btn-block{margin-top:var(--s6)}
.pane .alt{margin-top:var(--s6);padding-top:var(--s5);border-top:var(--border);text-align:center;color:var(--grey)}
.row2{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.type{display:flex;gap:var(--s3);align-items:center;border:2px solid var(--ink);border-radius:var(--radius);padding:var(--s4);cursor:pointer}
.type input{width:20px;height:20px;accent-color:var(--purple-dk)}
.type b{display:block;font-weight:600}
.type span{font-size:var(--t-meta);color:var(--grey)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:var(--s2)}
.meter i{height:4px;border-radius:var(--radius-pill);background:var(--line)}
.meter[data-s="1"] i:nth-child(-n+1),.meter[data-s="2"] i:nth-child(-n+2),.meter[data-s="3"] i:nth-child(-n+3),.meter[data-s="4"] i{background:var(--ink)}
.note{background:var(--cream);border:var(--border);border-radius:var(--s3);padding:var(--s3) var(--s4);margin-top:var(--s5);font-size:15px}
.done{text-align:center}
.done .ic{width:64px;height:64px;border-radius:var(--radius-pill);background:var(--mint-bg);color:var(--mint-fg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4)}
.solo{max-width:520px;margin:var(--s7) auto 0}
@media (max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .au-show{min-height:0}
  .au-show .au-in{padding:var(--s5)}
  .au-show .who{display:none}
  .au-show .band{height:32px}
  .au-photo{height:150px}
  .au-show .hstar{height:90px;bottom:110px;right:16px}
  .pane{padding:var(--s5)}
}
/* 31 Oct 2026, phones: the form is what people came for, so the showcase shrinks to a short purple band above it
   (no photo, no star) and the first field shows without scrolling */
@media (max-width:760px){
  .auth{margin-top:var(--s4);gap:var(--s4)}
  .au-photo,.au-show .hstar{display:none}
  .au-show .au-in{padding:var(--s5) var(--s5) var(--s4);gap:var(--s2)}
  .au-show h1{font-size:40px}
  .au-show p{font-size:16px;margin-top:var(--s2)}
}