.cn-account-auth{background:var(--surface-page);color:var(--text-body);padding:clamp(32px,5vw,64px) 20px;min-height:48vh}
.cn-auth-container{width:100%;max-width:400px;margin:0 auto;font:var(--text-body-14)}
.cn-auth-container h1{font:var(--text-h3);letter-spacing:var(--tracking-display);text-align:center;margin:0 0 12px}
.cn-auth-container>p{text-align:center;color:var(--text-muted);margin-bottom:28px}
.cn-auth-container a{color:var(--brand-600);text-underline-offset:3px}
/* The confirmation dialog borrows its shape from delivery.css, but it sits
   inside .cn-auth-container, so its actions would otherwise inherit the accent
   link colour above — the two selectors tie on specificity and this file loads
   last. They are buttons, not links: restore the filled/outline pair, which
   stays legible when --white and --gray-1000 swap over in dark mode. */
.cn-auth-container .cn-auth-actions a{color:var(--gray-1000)}
.cn-auth-container .cn-auth-actions a:first-child{color:var(--white)}
/* The fields sit in a panel of their own, so they read as one block against the
   page rather than floating on it. */
.cn-auth-card{border:1px solid var(--border-soft);border-radius:10px;background:var(--surface-card);padding:clamp(20px,3.4vw,28px)}
.cn-auth-container form{display:grid;gap:18px}
.cn-auth-field{display:grid;gap:7px}
/* First and last name share a row on the sign-up form, and stack on a phone. */
.cn-auth-names{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:420px){.cn-auth-names{grid-template-columns:minmax(0,1fr)}}
/* Small, letter-spaced and quiet: the label names the field and the value typed
   into it carries the weight. --tracking-eyebrow is the token the rest of the
   site already uses for a label in this register. */
.cn-auth-field label{font:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.cn-auth-field input{width:100%;box-sizing:border-box;min-width:0;height:46px;border:1px solid var(--border-soft);border-radius:6px;padding:12px;font:var(--text-body-16);color:var(--text-body);background:var(--surface-page)}
.cn-auth-field input::placeholder{color:var(--text-subtle)}
.cn-auth-field input:focus{border-color:var(--border-strong)}
.cn-auth-password{display:flex;position:relative}
.cn-auth-password input{padding-right:65px}
.cn-auth-password button{position:absolute;right:5px;top:5px;height:38px;padding:0 9px;border:0;background:transparent;color:var(--text-muted);font:var(--text-caption);cursor:pointer}
.cn-auth-container :is(input,button,a):focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.cn-auth-container button{transition:background 150ms var(--ease-out)}
.cn-auth-container button:disabled{cursor:not-allowed;opacity:.65}
.cn-auth-container .cn-auth-submit{height:46px;border:1px solid var(--gray-1000);border-radius:6px;background:var(--gray-1000);color:var(--white);font:var(--text-label);cursor:pointer}
.cn-auth-submit:hover:not(:disabled){opacity:.9}
.cn-auth-hint{font:var(--text-caption);color:var(--text-muted);margin:-8px 0 0}
.cn-auth-forgot{justify-self:end;font:var(--text-caption);margin-top:-6px}
.cn-auth-error{color:var(--brand-600);font:var(--text-caption)}
.cn-auth-providers{display:grid;gap:10px;margin-top:26px}
.cn-auth-divider{display:flex;align-items:center;gap:14px;color:var(--text-muted);font:var(--text-caption);margin-bottom:8px}
.cn-auth-divider::before,.cn-auth-divider::after{content:'';height:1px;background:var(--border-soft);flex:1}
.cn-auth-providers>button{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;border:1px solid var(--border-soft);border-radius:6px;background:var(--surface-page);color:var(--text-body);font:var(--text-label);cursor:pointer}
.cn-auth-providers>button:hover:not(:disabled){background:var(--surface-sunken)}
.cn-auth-mark{display:flex;flex:0 0 auto;width:16px;height:16px}
.cn-auth-mark img{width:16px;height:16px;object-fit:contain}
/* mark-github.png is a black glyph, so it disappears into the dark theme. The
   colour marks read correctly on both surfaces and stay untouched. */
:root[data-theme="dark"] .cn-auth-mark img[data-provider="github"]{filter:brightness(0) invert(1)}
.cn-auth-provider-label{flex:1 1 auto;text-align:left}
.cn-auth-provider-state{flex:0 0 auto;font:var(--text-caption);color:var(--text-muted)}
.cn-auth-retry{font:var(--text-caption);color:var(--text-muted)}
.cn-auth-retry button{border:0;background:transparent;padding:0;color:var(--brand-600);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cn-auth-container .cn-auth-legal{font:var(--text-caption);line-height:1.6;margin:24px 0 0}
.cn-auth-help,.cn-auth-result{display:grid;gap:14px;margin-top:24px;text-align:center}
.cn-auth-status{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* A form-level failure is a statement about the whole submission, so it gets a
   block of its own rather than the same 12px caption an inline field error uses. */
.cn-auth-container form>.cn-auth-error{font:var(--text-body-14);padding:10px 12px;border-left:2px solid var(--brand-600);background:var(--white)}
/* Chrome repaints an autofilled field with its own light background and dark
   ink, which is unreadable on the dark theme. An inset shadow is the only way
   to override that fill; -webkit-text-fill-color is the only way to set the ink. */
.cn-auth-container input:-webkit-autofill,
.cn-auth-container input:-webkit-autofill:hover,
.cn-auth-container input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-body);
  -webkit-box-shadow:0 0 0 100px var(--surface-page) inset;
  box-shadow:0 0 0 100px var(--surface-page) inset;
  caret-color:var(--text-body)}
@media(prefers-reduced-motion:reduce){.cn-auth-container button{transition:none}}