/* Login presentation shares the approved signup colors and controls. */
.login-redesign { --login-warning: #8a4b0f; --login-success: #067647; }
.login-form-body { width: 100%; margin: 0; padding-top: var(--signup-space-xl); }
.login-redesign .login-form-body .signup-social-options { margin-top: 0; }
.login-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--signup-space-lg); margin-top: auto; padding-top: var(--signup-space-lg); font-size: var(--signup-text-small); line-height: 18px; }
.login-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--signup-space-md); }
.login-redesign .login-footer nav a { color: var(--signup-muted); }
.login-redesign .login-footer nav a:hover { color: var(--signup-accent); }
/* Four decorative views share a 16-second clock: four seconds per section. */
.login-workspace { --tour-duration: 16s; container-type: inline-size; width: 100%; max-width: 520px; margin: 0 auto; }
.login-workspace-window { overflow: hidden; border: 1px solid var(--signup-border); border-radius: 12px; background: var(--signup-paper); box-shadow: 0 12px 32px -24px rgb(32 38 54 / 22%); }
.login-workspace svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.login-workspace-bar { display: flex; align-items: center; height: 43px; padding-inline: var(--signup-space-md); border-bottom: 1px solid var(--signup-rule); }
.login-workspace-bar img { display: block; width: auto; height: 28px; }
.login-tour { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
.login-tour-rail { display: flex; flex-direction: column; gap: 6px; padding: 16px 8px; border-right: 1px solid var(--signup-rule); background: #fafbfc; }
.login-tour-dashboard { --tour-phase: 0s; }
.login-tour-profile { --tour-phase: -12s; }
.login-tour-api { --tour-phase: -8s; }
.login-tour-database { --tour-phase: -4s; }
.login-tour-item { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 6px; border-radius: 5px; color: var(--signup-muted); font-size: var(--signup-text-caption); font-weight: 500; animation: login-tour-tab var(--tour-duration) linear var(--tour-phase) infinite; }
.login-tour-item svg { width: 15px; height: 15px; }
.login-tour-stage { display: grid; min-width: 0; }
.login-tour-scene { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; height: 240px; padding: 18px; opacity: 0; pointer-events: none; animation: login-tour-scene var(--tour-duration) linear var(--tour-phase) infinite; }
.login-workspace-heading strong { display: block; color: var(--signup-ink); font-size: var(--signup-text-body); font-weight: 600; line-height: 20px; }
.login-workspace-heading > span { display: block; margin-top: 3px; color: var(--signup-muted); font-size: var(--signup-text-caption); line-height: 16px; }
.login-workspace svg.login-workspace-chart { display: block; width: 100%; height: 96px; margin-top: 14px; overflow: visible; color: var(--signup-accent); stroke: none; }
.login-chart-grid { stroke: var(--signup-rule); stroke-width: 1; }
.login-chart-line { stroke: currentColor; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; animation: login-chart-draw var(--tour-duration) linear infinite; }
.login-chart-area { animation: login-chart-reveal var(--tour-duration) linear infinite; }
.login-chart-labels { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; color: var(--signup-muted); font-size: 10px; }
.login-chart-labels span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.login-tour-caption { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--signup-rule); color: var(--signup-muted); font-size: var(--signup-text-caption); line-height: 16px; }
.login-tour-rows { margin-top: 12px; }
.login-tour-row { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--signup-muted); animation: login-tour-detail var(--tour-duration) ease-out calc(var(--tour-phase) + var(--tour-stagger, 0s)) infinite; }
.login-tour-row + .login-tour-row { border-top: 1px solid var(--signup-rule); }
.login-tour-row:nth-child(2) { --tour-stagger: .25s; }
.login-tour-row:nth-child(3) { --tour-stagger: .5s; }
.login-tour-row > svg { width: 20px; height: 20px; }
.login-tour-row > div { min-width: 0; }
.login-tour-row strong { display: block; color: var(--signup-ink); font-size: var(--signup-text-small); font-weight: 500; line-height: 18px; }
.login-tour-row span { display: block; font-size: var(--signup-text-caption); line-height: 16px; }
.login-workspace-mask { font-family: ui-monospace, monospace; letter-spacing: 1px; }
.login-tour-key { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--signup-rule); border-radius: 6px; background: var(--signup-panel); }
.login-tour-key > span { color: var(--signup-muted); font-size: var(--signup-text-caption); white-space: nowrap; }
.login-tour-key strong { margin-left: auto; color: var(--signup-ink); font-size: var(--signup-text-small); font-weight: 500; line-height: 18px; }
.login-tour-requests { display: grid; grid-template-columns: minmax(0, 1fr); margin-block: 8px 4px; }
.login-tour-requests > div { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 22px; animation: login-tour-detail var(--tour-duration) ease-out calc(var(--tour-phase) + var(--tour-stagger, 0s)) infinite; }
.login-tour-requests > div + div { border-top: 1px solid var(--signup-rule); }
.login-tour-requests > div:nth-child(2) { --tour-stagger: .12s; }
.login-tour-requests > div:nth-child(3) { --tour-stagger: .24s; }
.login-tour-requests > div:nth-child(4) { --tour-stagger: .36s; }
.login-tour-requests > div > span { flex: 0 0 24px; color: var(--signup-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.login-tour-requests code { color: var(--signup-muted); font-family: ui-monospace, monospace; font-size: var(--signup-text-small); line-height: 18px; white-space: nowrap; }
.login-tour-files .login-tour-row { min-height: 61px; }
.login-tour-row .login-tour-download { width: 16px; height: 16px; margin-left: auto; color: var(--signup-accent); animation: login-tour-download var(--tour-duration) ease-in-out calc(var(--tour-phase) + var(--tour-stagger, 0s)) infinite; }
@keyframes login-tour-scene {
    0%, 22.5%, 100% { opacity: 1; transform: translateY(0); }
    25%, 97.5% { opacity: 0; transform: translateY(4px); }
}
@keyframes login-tour-tab {
    0%, 22.5%, 100% { color: var(--signup-accent); background-color: #eef0ff; }
    25%, 97.5% { color: var(--signup-muted); background-color: transparent; }
}
/* Complete the chart before the crossfade; reset only while it is hidden. */
@keyframes login-chart-draw { 0%, 90.01%, 100% { stroke-dashoffset: 1; } 22.5%, 90% { stroke-dashoffset: 0; } }
@keyframes login-chart-reveal { 0%, 90.01%, 100% { clip-path: inset(0 100% 0 0); } 22.5%, 90% { clip-path: inset(0); } }
@keyframes login-tour-detail {
    0%, 97%, 100% { opacity: 0; transform: translateY(4px); }
    6%, 90% { opacity: 1; transform: translateY(0); }
}
@keyframes login-tour-download { 0%, 12%, 100% { transform: translateY(0); } 6% { transform: translateY(3px); } }
/* Keep form entry and account notices free of competing motion. */
.login-redesign:has(.signup-form-panel:focus-within, dialog[open]) .login-workspace * { animation-play-state: paused; }
@container (max-width: 440px) {
    .login-chart-labels span:nth-child(even) { display: none; }
}
.login-redesign .login-method-hint { margin-top: 12px; color: var(--signup-muted); font-size: var(--signup-text-small); line-height: 18px; }
.login-redesign .signup-field label { padding-right: 0; }
.login-password-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.login-redesign .login-password-label label { margin: 0; }
.auth-field-label { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
.login-redesign .auth-field-label label, .login-password-label .auth-field-label { margin-bottom: 0; }
.auth-field-error { color: var(--signup-error); font-size: var(--signup-text-small); line-height: 18px; white-space: nowrap; }
.login-redesign .signup-input[aria-invalid="true"], .login-redesign .signup-password:has([aria-invalid="true"]) { border-color: var(--signup-error); }
.login-redesign .signup-password .signup-input[aria-invalid="true"] { border: 0; }
.login-password-label a { font-size: var(--signup-text-small); line-height: 18px; white-space: nowrap; }
.login-redesign #password::placeholder { color: var(--signup-muted); }
.login-redesign .signup-password-toggle { flex-basis: 44px; width: 44px; height: 42px; }
.login-redesign .signup-input:-webkit-autofill { -webkit-text-fill-color: var(--signup-ink); caret-color: var(--signup-ink); box-shadow: 0 0 0 1000px var(--signup-paper) inset; }
.login-submit-wrap { position: relative; margin-top: calc(40px - var(--signup-form-space)); }
.login-submit { width: 100%; min-height: var(--signup-control-height); padding: 10px 16px; border: 1px solid var(--signup-accent); border-radius: var(--signup-radius); background: var(--signup-accent); color: var(--signup-paper); font: inherit; font-size: var(--signup-text-body); font-weight: 600; cursor: pointer; transition: background-color 120ms; }
.login-submit:active { background: var(--signup-accent-hover); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.login-submit[aria-busy="true"] { cursor: progress; }
.login-feedback { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; }
.login-feedback .signup-notice-review { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 20px; font-size: var(--signup-text-small); line-height: 18px; text-align: left; }
.login-feedback svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.login-feedback-details { margin-left: auto; color: var(--signup-accent); }
.login-feedback[data-tone="error"] .signup-notice-review { color: var(--signup-error); }
.login-feedback[data-tone="warning"] .signup-notice-review { color: var(--login-warning); }
.login-feedback[data-tone="success"] .signup-notice-review { color: var(--login-success); }
.login-captcha-wrap { width: calc(304px * var(--signup-captcha-scale)); max-width: 100%; min-height: calc(78px * var(--signup-captcha-scale)); }
.login-redesign #login-grecaptcha { width: 304px; min-height: 78px; transform: scale(var(--signup-captcha-scale)); transform-origin: top left; margin-bottom: calc(78px * (var(--signup-captcha-scale) - 1)); }
.login-redesign .login-captcha-status { min-height: 40px; padding-top: 4px; color: var(--signup-muted); font-size: var(--signup-text-small); line-height: 18px; }
.login-captcha-status button { border: 0; padding: 0; background: transparent; color: var(--signup-accent); font: inherit; cursor: pointer; }
.signup-notice-actions .auth-notice-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: var(--signup-radius); background: var(--signup-accent); color: var(--signup-paper); font-weight: 500; }
.signup-notice-actions .auth-notice-link:hover { background: var(--signup-accent-hover); color: var(--signup-paper); }
.auth-field-error[hidden], .login-captcha-status [hidden], .signup-notice-actions [hidden] { display: none; }
.login-security-help { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--signup-rule); font-size: var(--signup-text-small); }
.login-security-help summary { color: var(--signup-ink); cursor: pointer; }
.login-security-help p { margin-top: 8px; }
.login-redesign .signup-dialog-close { flex-basis: 44px; width: 44px; height: 44px; margin: -8px -8px 0 0; }
.login-redesign .signup-dialog-header h2 { overflow-wrap: anywhere; }
.login-redesign .login-google-auth-wrap[data-unavailable] .login-google-provider { display: none; }
.login-redesign .login-google-auth-wrap[data-unavailable] .login-social-btn { pointer-events: auto; cursor: pointer; }
.login-security-help summary:focus-visible { outline: 2px solid var(--signup-accent); outline-offset: 3px; }
@media (hover: hover) {
    .login-submit:hover { background: var(--signup-accent-hover); }
}
@media (min-width: 901px) {
    .login-redesign { --signup-form-space: 28px; }
    .login-redesign .signup-divider { margin-block: 28px; }
    .login-submit-wrap { margin-top: calc(44px - var(--signup-form-space)); }
}
@media (max-width: 900px) {
    .login-redesign .signup-layout { min-height: 0; }
    .login-redesign .login-story { min-height: 0; }
}
@media (max-width: 480px) {
    .login-form-body { padding-top: var(--signup-space-lg); }
    .login-footer { flex-direction: column; gap: var(--signup-space-sm); }
    .login-tour { grid-template-columns: 84px minmax(0, 1fr); }
    .login-tour-rail { padding: 14px 5px; }
    .login-tour-item { gap: 5px; padding-inline: 4px; font-size: 10px; }
    .login-tour-item svg { width: 13px; height: 13px; }
    .login-tour-scene { height: 260px; padding: 16px 12px; }
    .login-workspace-heading strong { font-size: var(--signup-text-small); }
    .login-tour-key { padding-left: 8px; }
    .login-tour-key .login-workspace-mask { font-size: 10px; letter-spacing: 0; }
    .login-tour-requests { margin-block: 8px; }
    .login-tour-requests > div { min-height: 24px; }
    .login-tour-row { gap: 7px; }
    .login-tour-row > svg { width: 16px; height: 16px; }
    .login-chart-labels span:not(:first-child):not(:nth-child(4)):not(:last-child) { display: none; }
    .login-chart-labels span:nth-child(4) { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .login-submit { transition: none; }
    .login-redesign .login-workspace * { animation: none; }
    .login-tour-scene { opacity: 0; transform: none; }
    .login-tour-scene:first-child { opacity: 1; }
    .login-tour-item:first-child { color: var(--signup-accent); background-color: #eef0ff; }
}