/* Sign-in and first run. */
.auth { display: grid; grid-template-columns: minmax(360px, 560px) 1fr; min-height: 100vh; }
.auth-form { padding: var(--s-6) clamp(1.25rem, 4vw, 3.5rem) calc(var(--pocbar-h) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-5); background: var(--surface); border-right: var(--rule-strong); }
.auth-form h1 { font-size: var(--t-40); }
.auth-aside { position: relative; background: var(--drench); color: var(--on-drench); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-7) clamp(1.5rem, 5vw, 4rem) calc(var(--pocbar-h) + var(--s-7)); overflow: hidden; }
.auth-aside .claim { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.5rem)/1.05 var(--font-display); max-width: 18ch; position: relative; }
.auth-aside p { color: var(--on-drench-muted); max-width: 52ch; margin-top: var(--s-4); position: relative; }
.auth-aside .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-aside .shade { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.235 0.008 30 / 0.2) 0%, oklch(0.235 0.008 30 / 0.55) 40%, oklch(0.235 0.008 30 / 0.94) 72%); }
.or { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; color: var(--muted); font-size: var(--t-13); }
.or::before, .or::after { content: ''; border-top: var(--rule); }
.roles-pick { border: var(--rule-strong); }
.roles-pick > button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.roles-pick > a, .roles-pick > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: var(--rule); text-decoration: none; color: var(--ink); }
.roles-pick > :last-child { border-bottom: 0; }
.roles-pick > :hover { background: var(--npb-soft); }
.roles-pick .m { font-size: var(--t-13); color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-strong); background: var(--surface); }
.steps li { padding: var(--s-3) var(--s-4); display: flex; gap: var(--s-3); align-items: center; font-weight: 600; color: var(--muted); }
.steps li + li { border-left: var(--rule); }
.steps li .n { width: 26px; height: 26px; border: var(--rule-strong); border-radius: var(--r-full); display: grid; place-items: center; font: 700 var(--t-13)/1 var(--font-display); }
.steps li[aria-current="step"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.steps li.done .n { background: var(--ink); color: var(--on-primary); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-aside { min-height: 280px; order: -1; padding-bottom: var(--s-6); } .auth-form { border-right: 0; } }
@media (max-width: 640px) { .steps li { padding: var(--s-2); gap: var(--s-2); font-size: var(--t-13); flex-direction: column; align-items: flex-start; } }
.wel-photo { display: block; width: 100%; height: 180px; object-fit: cover; object-position: 50% 20%; border: var(--rule-strong); border-bottom: 0; }
@media (min-width: 901px) { .auth-aside { position: sticky; top: 0; align-self: start; height: 100vh; } }