/* Account forms use the same paper, ink and vermilion tokens as the workspace. */
.auth-page { margin: 0; background: var(--ds-paper); color: var(--ds-ink); font: 16px/1.65 var(--ds-font-body); -webkit-font-smoothing: antialiased; }
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth-page [v-cloak] { display: none; }
.auth-page ::selection { background: var(--ds-vermilion-wash); color: var(--ds-ink); }
.auth-page a { text-underline-offset: 4px; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; gap: 6rem; max-width: 1056px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.auth-context { padding-top: 1rem; }
.auth-home-link { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; color: var(--ds-ink-soft); font-size: .875rem; text-decoration: none; }
.auth-home-link:hover { color: var(--ds-vermilion-deep); }
.auth-context h2 { font: 700 2.75rem/1.4 var(--ds-font-display); margin: 2rem 0 1rem; letter-spacing: -.02em; }
.auth-context > p { color: var(--ds-ink-soft); margin: 0; }
.auth-capabilities { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.auth-capabilities li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--ds-line); font-size: .875rem; }
.auth-capabilities strong { font-weight: 600; }
.auth-capabilities span { color: var(--ds-ink-soft); }
.auth-panel { min-width: 0; padding: 2rem; background: var(--ds-paper-raised); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); }
.auth-switch { display: flex; border-bottom: 1px solid var(--ds-line); gap: 1.5rem; margin-bottom: 1.75rem; }
.auth-switch a { display: inline-flex; justify-content: center; align-items: center; min-width: 48px; min-height: 44px; padding: 0 .25rem .75rem; margin-bottom: -1px; color: var(--ds-ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.auth-switch a[aria-current] { color: var(--ds-vermilion-deep); font-weight: 600; border-color: var(--ds-vermilion); }
.auth-heading h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.4; margin: 0 0 .5rem; letter-spacing: -.02em; }
.auth-heading p { font-size: .875rem; color: var(--ds-ink-soft); margin: 0 0 1.75rem; }
.auth-field { margin: 0 0 1.25rem; }
.auth-field label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.auth-optional { font-weight: 400; font-size: .75rem; color: var(--ds-ink-soft); margin-left: .4rem; }
.auth-field input, .auth-field select { width: 100%; min-height: 48px; padding: .65rem .875rem; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm); background: var(--ds-paper-raised); color: var(--ds-ink); font: inherit; caret-color: var(--ds-vermilion-deep); transition: border-color 160ms var(--ds-ease); }
.auth-field input::placeholder { color: var(--ds-ink-soft); opacity: 1; }
.auth-field input:hover, .auth-field select:hover { border-color: var(--ds-ink-soft); }
.auth-field input[aria-invalid=true] { border-color: var(--ds-danger); }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.auth-link-button { background: none; border: 0; padding: .25rem 0; color: var(--ds-vermilion-deep); font: inherit; font-size: .875rem; cursor: pointer; text-underline-offset: 4px; }
.auth-link-button:hover { text-decoration: underline; }
.auth-password { position: relative; }
.auth-password input { padding-right: 4rem; }
.auth-password-toggle { position: absolute; right: 3px; top: 3px; min-height: 42px; min-width: 52px; padding: .4rem .65rem; background: none; border: 0; border-radius: var(--ds-radius-sm); color: var(--ds-ink-soft); cursor: pointer; font: inherit; font-size: .875rem; }
.auth-password-toggle:hover { color: var(--ds-ink); background: var(--ds-paper-sunken); }
.auth-note { color: var(--ds-ink-soft); font-size: .75rem; margin: .5rem 0 0; line-height: 1.65; }
.auth-note:empty { display: none; }
.auth-field-error { color: var(--ds-danger); font-size: .875rem; margin: .5rem 0 0; }
.auth-submit { width: 100%; margin-top: .25rem; min-height: 48px; box-shadow: none; }
.auth-submit:hover { box-shadow: none; }
.auth-page button:disabled { cursor: wait; }
.auth-details { margin: 0 0 1.25rem; padding: .25rem 0 .75rem; border-bottom: 1px solid var(--ds-line); }
.auth-details summary { cursor: pointer; min-height: 44px; padding: .5rem 0; font-size: .875rem; font-weight: 600; }
.auth-details .auth-note { margin: .25rem 0 1rem; }
.auth-details .auth-field:last-child { margin-bottom: .25rem; }
.auth-feedback { font-size: .875rem; padding: .875rem 1rem; margin: 0 0 1.25rem; border-radius: var(--ds-radius-sm); overflow-wrap: anywhere; }
.auth-feedback-error { background: var(--ds-danger-wash); color: var(--ds-danger); }
.auth-feedback-success { background: var(--ds-jade-wash); color: #266747; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; color: var(--ds-ink-soft); font-size: .75rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--ds-line); }
#googleSignInButton { display: flex; justify-content: center; min-height: 40px; }
.auth-footer { text-align: center; font-size: .875rem; color: var(--ds-ink-soft); margin: 1.5rem 0 0; }
.auth-footer a { color: var(--ds-vermilion-deep); font-weight: 600; margin-left: .5rem; }
.auth-reset h2 { font-size: 1.25rem; margin: 0 0 .5rem; font-weight: 600; }
.auth-reset > .auth-note { margin-bottom: 1.25rem; }
.auth-reset-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.auth-reset-actions .ds-btn { box-shadow: none; }
.auth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.auth-noscript { padding: 2rem; text-align: center; }
.auth-page :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--ds-vermilion); outline-offset: 3px; }
@media (max-width: 900px) { .auth-layout { gap: 2.5rem; } .auth-context h2 { font-size: 2.25rem; } }
@media (max-width: 700px) { .auth-layout { display: flex; flex-direction: column; max-width: 480px; gap: 0; padding: 1rem 1rem 3rem; } .auth-context { padding: 0 0 1rem; } .auth-context h2, .auth-context > p, .auth-capabilities { display: none; } .auth-panel { width: 100%; padding: 1.5rem; } .auth-heading h1 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .auth-page * { transition: none !important; scroll-behavior: auto !important; } }