/* Sign-in, sign-up and reset: Cilo's onboarding split (board 14). A white sheet on the grey canvas; the form
   centred on the left, a charcoal panel on the right carrying the brand line and the real Overview, dark, tilted
   into the corner. Brand pages stay light whatever theme the app saved. No mascot, no quote, no dots. */
.auth{--ink:#17251b;--ink-2:#304a37;--muted:#626759;--faint:#8f9486;--line:#dfdfd2;--line-2:#cdcfc0;--soft:#efede3;--canvas:#f7f4ec;--card:#fffdf7;
  --brand:#233e2b;--brand-2:#1a2f21;--on-brand:#fffdf7;--brand-soft:#e4ebe3;--accent:#233e2b;--accent-2:#1a2f21;--accent-soft:#e4ebe3;
  --green:#2f6b3f;--green-soft:#e4ebe3;--red:#b42318;--red-soft:#f8e6e3;color-scheme:light}
html,body{height:100%}
body.auth{background:var(--canvas);color:var(--ink);display:grid;place-items:center;padding:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);width:min(1392px,100%);min-height:min(900px,calc(100vh - 48px));background:var(--card);border-radius:26px;overflow:hidden;border:1px solid var(--line)}

/* ---------- left: the form ---------- */
.pane{position:relative;display:flex;flex-direction:column;padding:40px 48px 48px;min-width:0}
.logo{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.logo img{width:44px;height:44px;border-radius:13px}
.form-wrap{width:100%;max-width:470px;margin:auto;padding:32px 0 24px}
.form-wrap h1{display:flex;justify-content:center;gap:10px;font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-align:center}
.sub{font-size:16px;color:var(--muted);margin-top:8px;text-align:center}
.auth-form{display:flex;flex-direction:column;gap:18px;margin-top:34px}
.auth-form[hidden]{display:none}
.auth-form .field{display:flex;flex-direction:column;gap:8px}
.auth-form .field>label{font-size:14px;font-weight:500;color:var(--ink)}
.auth-form input.input{width:100%;height:52px;border-radius:10px;font-size:15px;padding:0 16px;border:1px solid var(--line-2);background:var(--card)}
.auth-form .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.auth-form .input::placeholder{color:var(--faint)}
.pw{position:relative}
.pw .input{padding-right:52px}
.pw button{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:40px;height:38px;border:0;border-radius:9px;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.pw button:hover{background:var(--soft)}
.pw button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.check-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.35}
.check input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;border:1px solid var(--line-2);border-radius:6px;background:var(--card);display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.check input::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{opacity:1}
.check-row a,.switch a{text-decoration:underline;text-underline-offset:3px;font-weight:500;color:var(--ink)}
.check-row a{font-size:14px;white-space:nowrap}
.hint{font-size:13px;color:var(--muted);margin-top:-8px}
.hint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.auth-form .btn.dark{width:100%;height:52px;border-radius:100px;font-size:15px;font-weight:500;background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.auth-form .btn.dark:hover{background:var(--brand-2)}
.auth-form .btn.dark[disabled]{background:#b4b7bb;border-color:#b4b7bb;color:#fff;opacity:1;cursor:progress}
.field-error{margin-top:-4px;padding:10px 14px;border-radius:10px;background:var(--red-soft);color:var(--red);font-size:14px}
.field-error[hidden]{display:none}
.switch{font-size:15px;color:var(--ink-2);margin-top:22px;text-align:center}
.hint[hidden],.switch[hidden],.auth-form .field[hidden]{display:none}
.auth-form input.code{font-size:22px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.linkish{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.linkish[disabled]{color:var(--faint);cursor:default}

/* ---------- right: charcoal panel, brand line, the product in the corner ---------- */
.story{position:relative;overflow:hidden;background:#17251b;color:#f7f4ec;min-height:640px}
.story::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(247,244,236,.05) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(247,244,236,.05) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.story-copy{position:relative;padding:clamp(48px,10vh,120px) clamp(32px,5vw,72px) 0;max-width:560px}
.story-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a9c8ae}
.story-h{margin-top:12px;font-size:clamp(28px,2.6vw,38px);line-height:1.15;font-weight:500;letter-spacing:-.04em;color:#f7f4ec}
.story-h span{color:#a9c8ae}
.story-p{margin-top:16px;font-size:16px;line-height:1.55;color:#bdc6b5;max-width:440px}
.story-shot{position:absolute;left:8%;bottom:-6%;width:120%;height:auto;max-width:none;mix-blend-mode:lighten}
.story-fade{display:none}
.story-fine{position:absolute;left:clamp(32px,5vw,72px);bottom:28px;font-size:13px;color:rgba(255,255,255,.55)}

/* ---------- tablet / phone: the story panel drops away ---------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;min-height:0}
  .story{display:none}
}
@media (max-width:600px){
  body.auth{padding:0;display:block}
  .split{border-radius:0;border:0;min-height:100vh;min-height:100dvh}
  .pane{padding:20px 16px 36px}
  .logo{font-size:22px;gap:10px}
  .logo img{width:38px;height:38px;border-radius:11px}
  .form-wrap{margin:0;padding:40px 0 0;max-width:none}
  .form-wrap h1{font-size:28px}
  .auth-form{margin-top:28px;gap:16px}
}