/* ===========================================================================
   Auth screens: sign in, set password, and their outcome states.

   These pages are OUTSIDE app/base.html on purpose -- they render before a
   session exists, so they carry no sidebar, no permission tags and no app
   chrome. Everything they need is here and in template/app/_auth_shell.html.

   Brand (Highlend_Logo_2 guide): teal #0E9A94 with #0A5F5D for depth, amber
   #F2A33C for caution, charcoal #3C3F38, off-white #F4F6F6. The origami motif
   is used as GEOMETRY -- folded facets behind the panel -- rather than as a
   repeated logo, so the mark itself appears exactly once per screen.
   =========================================================================== */
:root{
  --auth-teal:#0E9A94; --auth-teal-dark:#0A5F5D;
  --auth-amber:#F2A33C; --auth-ink:#16313A; --auth-muted:#5B6B70;
  --auth-line:#E4E8EC; --auth-paper:#F4F6F6;
}
*{box-sizing:border-box}
html,body{height:100%}
body.auth-body{
  margin:0;background:#EEF1F2;color:var(--auth-ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;align-items:center;justify-content:center;padding:26px 18px;
}
.auth{width:100%;max-width:1060px;display:grid;grid-template-columns:1.05fr .95fr;
      min-height:580px;background:#fff;border-radius:16px;overflow:hidden;
      box-shadow:0 18px 44px rgba(16,41,58,.12)}

/* ---- brand panel ---- */
.auth__brand{position:relative;overflow:hidden;color:#fff;padding:38px 40px;
  background:radial-gradient(120% 120% at 0% 0%, #12AAA3 0%, var(--auth-teal) 42%, var(--auth-teal-dark) 100%);
  display:flex;flex-direction:column}
.auth__fold{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none}
.auth__inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
/* width:auto and align-self matter: this is a flex column, which would otherwise
   STRETCH the logo to the panel width and squash it (the bug this redesign fixed). */
.auth__logo{height:30px;width:auto;align-self:flex-start;object-fit:contain;margin-bottom:auto}
.auth__line{font-size:1.72rem;line-height:1.26;font-weight:600;letter-spacing:-.01em;
            margin:34px 0 14px;max-width:16ch}
.auth__sub{font-size:.94rem;line-height:1.65;color:rgba(255,255,255,.84);max-width:34ch;margin:0 0 26px}
.auth__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.auth__points li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:rgba(255,255,255,.92)}
.auth__tick{flex:0 0 auto;margin-top:2px}
.auth__foot{margin-top:28px;font-size:.74rem;color:rgba(255,255,255,.6)}

/* ---- form panel ---- */
.auth__panel{background:#fff;padding:46px 52px;display:flex;flex-direction:column;justify-content:center}
.auth__title{font-size:1.5rem;font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.auth__hint{font-size:.92rem;color:var(--auth-muted);margin:0 0 28px;line-height:1.6}
.auth-f{margin-bottom:18px}
.auth-f label{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px}
.auth-f input{width:100%;padding:12px 14px;border:1px solid var(--auth-line);border-radius:10px;
  font-size:.95rem;font-family:inherit;background:#FBFCFC;color:var(--auth-ink);
  transition:border-color .15s,box-shadow .15s}
.auth-f input::placeholder{color:#9AA7AC}
.auth-f input:focus{outline:none;border-color:var(--auth-teal);
  box-shadow:0 0 0 3px rgba(14,154,148,.14);background:#fff}
.auth-pw{position:relative}
.auth-pw button{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--auth-muted);cursor:pointer;font-size:.78rem;
  font-weight:600;padding:4px 6px}
.auth-row{display:flex;justify-content:flex-end;margin:-6px 0 22px}
.auth-row a{font-size:.83rem;color:var(--auth-teal-dark);text-decoration:none;font-weight:500}
.auth-row a:hover{text-decoration:underline}
.auth-btn{width:100%;padding:13px 16px;border:0;border-radius:10px;background:var(--auth-teal);
  color:#fff;font-size:.97rem;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s,transform .06s;text-align:center;text-decoration:none;display:block}
.auth-btn:hover{background:#0C8A85;color:#fff}
.auth-btn:active{transform:translateY(1px)}
.auth-support{margin:24px 0 0;font-size:.83rem;color:var(--auth-muted);text-align:center}
.auth-support a{color:var(--auth-teal-dark);font-weight:500}

/* ---- messages ---- */
.auth-alert{border-radius:9px;padding:11px 13px;font-size:.86rem;margin-bottom:20px;line-height:1.55}
.auth-alert--error{background:#FAE7E7;border:1px solid #F0CFCF;border-left:3px solid #A32D2D;color:#8A2A2A}
.auth-alert--info{background:#E6F4F3;border:1px solid #CBE6E4;border-left:3px solid var(--auth-teal);color:#0A5F5D}
.auth-alert--warn{background:#FDF4E6;border:1px solid #F3DDBA;border-left:3px solid var(--auth-amber);color:#7A5312}
.auth-alert ul{margin:0;padding-left:18px}

/* ---- password rules ---- */
.auth-rules{list-style:none;margin:6px 0 22px;padding:0;display:grid;
            grid-template-columns:1fr 1fr;gap:7px 14px}
.auth-rules li{font-size:.8rem;color:var(--auth-muted);display:flex;gap:7px;align-items:center}
.auth-rules li.is-ok{color:#1A6E47}
.auth-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid #CBD4D7;flex:0 0 auto;
          display:grid;place-items:center}
.auth-rules li.is-ok .auth-dot{border-color:#1A6E47;background:#1A6E47}
.auth-dot svg{display:none}
.auth-rules li.is-ok .auth-dot svg{display:block}

/* ---- a state rather than a form (expired link, done) ---- */
.auth-state{text-align:center;max-width:36ch;margin:0 auto}
.auth-state__icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.auth-state__icon--warn{background:#FDF4E6}
.auth-state__icon--ok{background:#E7F3EC}

@media (max-width:860px){
  body.auth-body{padding:0;align-items:stretch}
  .auth{grid-template-columns:1fr;border-radius:0;min-height:100vh;box-shadow:none}
  .auth__brand{padding:22px 24px}
  .auth__line{font-size:1.25rem;margin:18px 0 0}
  .auth__sub,.auth__points,.auth__foot{display:none}
  .auth__panel{padding:30px 24px}
  .auth-rules{grid-template-columns:1fr}
}