/* authlook1 (Oct 21 2026) – visual layer for the signed-out screens (sign in, forgot password, create account).
   Loaded by js/v2-authlook.js. Colours come only from the app's own variables (--p, --p2, --pl, --g, --gl),
   so UnScramble stays navy + gold and Chief Janitorial stays indigo. Forms are not touched. */

.auth-shell{max-width:1040px;margin:18px auto 8px;padding:0 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:22px;align-items:start}
.auth-shell .login-wrap{margin:0 auto;max-width:460px;width:100%}
.auth-shell .login-wrap .card{box-shadow:0 10px 32px rgba(0,0,0,.10)}

/* hero panel */
.auth-hero{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,var(--p) 0%,var(--p2) 100%);color:#fff;padding:28px 26px 22px;min-height:420px;box-shadow:0 12px 36px rgba(0,0,0,.18)}
.auth-hero::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:var(--g);opacity:.22}
.auth-hero::after{content:"";position:absolute;left:-60px;bottom:-110px;width:220px;height:220px;border-radius:50%;background:#fff;opacity:.08}
.auth-hero>*{position:relative}
.ah-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ah-logo img{height:44px;max-width:190px;object-fit:contain;background:#fff;border-radius:10px;padding:5px 8px}
.ah-logo span{font-size:13px;opacity:.85;letter-spacing:.2px}
.auth-hero h2{margin:0 0 6px;color:#fff;font-size:26px;line-height:1.15;font-weight:800}
.auth-hero p.ah-sub{margin:0 0 20px;font-size:15px;line-height:1.45;opacity:.92;max-width:38ch}

/* step infographic */
.ah-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.ah-steps li{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;padding:8px 0}
.ah-steps li+li{border-top:1px dashed rgba(255,255,255,.22)}
.ah-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ah-ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ah-ic i{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--g);color:var(--p);font:800 11px/20px -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;font-style:normal}
.cj-app .ah-ic i{background:#fff;color:var(--p)}
.ah-steps b{display:block;font-size:15px;margin-top:2px}
.ah-steps span{display:block;font-size:13px;opacity:.85;line-height:1.4}

/* fact chips */
.ah-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ah-chips span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 11px;font-size:12.5px}
.ah-chips svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* sign-in card: small heading icon, roomier controls */
.auth-shell .login-wrap h1{display:flex;align-items:center;gap:10px}
.cj-app .auth-shell .login-wrap h1{justify-content:center}
.auth-shell .login-wrap h1::before{content:"";flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--pl) center/20px no-repeat}
.auth-shell .login-wrap .logo-big{display:none}
.auth-shell form[data-form=login] button[type=submit]{min-width:140px;padding:11px 18px;font-size:15.5px;border-radius:9px}
.auth-shell a.btn[href="#/signup"]{width:100%;text-align:center;padding:11px 14px;border-radius:9px}

/* create-account choices: icon tile + text */
.auth-shell .choice{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:13px 14px;border-radius:12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.auth-shell .choice:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.auth-shell .choice::before{content:"";width:48px;height:48px;border-radius:12px;background:var(--pl) center/26px no-repeat}
.auth-shell .choice .ch-tx{display:block;min-width:0;line-height:1.4}
.auth-shell .choice[href="#/signup/tester"]::before{background-color:var(--gl)}

/* phone */
/* phone = app: the sign-in card comes first, the panel shrinks to a small "how it works" strip under it */
@media(max-width:860px){
  .auth-shell{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:6px}
  .auth-shell>div,.auth-shell .login-wrap,.auth-hero{width:100%;max-width:none}
  .auth-shell>div{order:1}
  .auth-hero{order:2;min-height:0;padding:14px 14px 12px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
  .auth-hero::before,.auth-hero::after{display:none}
  .auth-hero h2{font-size:15px;margin-bottom:8px}
  .auth-hero p.ah-sub{display:none}
  .ah-logo{display:none}
  .ah-steps{grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch}
  .ah-steps li{grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:center;align-items:start;text-align:center;padding:4px 2px;gap:8px}
  .ah-steps li+li{border-top:0}
  .ah-steps li>div:last-child{display:flex;align-items:flex-start;justify-content:center;min-height:2.6em;width:100%}
  .ah-steps span{display:none}
  .ah-steps b{font-size:12.5px;line-height:1.25;margin-top:0;max-width:11ch}
  .ah-chips{display:none}
  /* signed-out top bar (no Sign out button): keep it on one line on phones. Signed-in bars keep their own wrapping. */
  header.top:not(:has([data-act=logout])){flex-wrap:nowrap}
  header.top:not(:has([data-act=logout])) .ush-x{display:none}
  header.top:not(:has([data-act=logout])) .ush-who{margin-left:auto;flex-wrap:nowrap}
  header.top:not(:has([data-act=logout]))>div{min-width:0}
}
@media(prefers-reduced-motion:reduce){.auth-shell .choice{transition:none}}

/* welcome1 (Oct 26 2026) – UnScramble desktop: bigger balanced two columns, full logo on a white tile, larger type, help line.
   Desktop only (min-width:861px) and UnScramble only; phone layout and Chief Janitorial unchanged. */
.ah-help{display:none}
@media(min-width:861px){
  html:not(.cj-app) .auth-shell{max-width:1340px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;margin-top:32px;padding:0 28px;align-items:stretch}
  html:not(.cj-app) .auth-shell>div:last-child{display:flex;align-items:center}
  html:not(.cj-app) .auth-shell .login-wrap{max-width:520px}
  html:not(.cj-app) .auth-hero{padding:36px 44px 30px;min-height:0;border-radius:22px;display:flex;flex-direction:column}
  html:not(.cj-app) .auth-hero::before{width:380px;height:380px;right:-130px;top:-130px}
  html:not(.cj-app) .auth-hero::after{width:300px;height:300px;left:-90px;bottom:-150px}
  html:not(.cj-app) .ah-logo{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
  html:not(.cj-app) .ah-logo img{height:auto;width:220px;max-width:100%;padding:12px 16px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  html:not(.cj-app) .ah-logo span{font-size:15px}
  html:not(.cj-app) .auth-hero h2{font-size:40px;margin-bottom:10px;letter-spacing:-.3px}
  html:not(.cj-app) .auth-hero p.ah-sub{font-size:17px;max-width:44ch;margin-bottom:22px}
  html:not(.cj-app) .ah-steps li{grid-template-columns:48px 1fr;gap:16px;padding:14px 0}
  html:not(.cj-app) .ah-ic{width:48px;height:48px}
  html:not(.cj-app) .ah-ic svg{width:26px;height:26px}
  html:not(.cj-app) .ah-ic i{width:22px;height:22px;line-height:22px;font-size:12px}
  html:not(.cj-app) .ah-steps b{font-size:18px}
  html:not(.cj-app) .ah-steps span{font-size:15px;line-height:1.45}
  html:not(.cj-app) .ah-chips{margin-top:24px;gap:10px}
  html:not(.cj-app) .ah-chips span{font-size:14px;padding:7px 13px}
  html:not(.cj-app) .ah-help{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding-top:22px;font-size:16px;font-weight:600}
  html:not(.cj-app) .ah-help svg{width:20px;height:20px;stroke:var(--g);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 20px}
  html:not(.cj-app) .ah-help a{color:var(--g);text-decoration:none;font-weight:800}
  html:not(.cj-app) .ah-help a:hover{text-decoration:underline}
}