/* Public sign-in and curator application flows. Shared shell and canvas stay owned by base/theme. */
.r-auth, [data-curator-signup-fragment] {
    --auth-ink: var(--rh-ink);
    --auth-muted: var(--rh-muted);
    --auth-line: color-mix(in srgb, var(--auth-ink) 16%, transparent);
    --auth-fill: color-mix(in srgb, var(--auth-ink) 5%, transparent);
    color: var(--auth-ink);
    font-family: var(--rh-sans);
}
.r-auth > main { width: 100%; max-width: none; margin: 0; padding: 0; }
.r-auth main *, [data-curator-signup-fragment] * { box-sizing: border-box; }
.login-shell, .curator-apply-shell, .welcome-shell {
    width: min(calc(100% - 2.5rem), 480px);
    min-height: calc(100svh - 180px);
    margin: 0 auto;
    padding: clamp(1.25rem, 5vh, 3rem) 0 4rem;
    animation: auth-enter 240ms ease both;
}
.curator-apply-shell { width: min(calc(100% - 2.5rem), 560px); }
.r-auth :is(.auth-title, .login-summary h2, .code-title, .welcome-shell h1),
.curator-apply-heading, .curator-apply-intro-title {
    margin: 0;
    color: var(--auth-ink);
    font: 500 clamp(2rem, 5vw, 3rem)/1.08 var(--rh-sans);
    letter-spacing: -0.055em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}
.login-shell > .auth-title { margin-bottom: 1.5rem; }
.r-auth :is(.login-lede, .login-footnote, .code-email, .spotify-disclaimer__body, .welcome-copy), .curator-apply-copy {
    margin: 0;
    color: var(--auth-muted);
    font: 400 1rem/1.6 var(--rh-sans);
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}
.r-auth a:not([class]), .curator-apply-fineprint a { color: inherit; text-underline-offset: 0.2em; }
.login-mode-toggle { display: flex; gap: 1.4rem; margin-bottom: 1.5rem; }
.login-mode-toggle button {
    min-height: 44px; padding: 0.5rem 0; border: 0; border-bottom: 1px solid transparent;
    color: var(--auth-muted); background: transparent; font: 400 1rem/1.4 var(--rh-sans); cursor: pointer;
}
.login-mode-toggle button.is-active { border-bottom-color: currentColor; color: var(--auth-ink); }
.login-pane { display: none; }
.login-pane.is-active { display: block; animation: auth-enter 180ms ease both; }
.login-form, .login-summary, .code-card, .code-actions { display: grid; gap: 1.25rem; }
.login-summary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.r-auth .login-form label, .curator-apply-label {
    display: block; margin: 0; color: var(--auth-muted); font: 400 0.85rem/1.4 var(--rh-sans); letter-spacing: 0; text-transform: none;
}
.r-auth .login-form input[type="email"], .curator-apply-input, .curator-apply-textarea {
    width: 100%; min-height: 48px; margin: 0; padding: 0.65rem 0; border: 0; border-bottom: 1px solid var(--auth-line); border-radius: 0;
    box-shadow: none; background: transparent; color: var(--auth-ink); font: 400 16px/1.5 var(--rh-sans); letter-spacing: -0.01em;
}
.r-auth .login-form input[type="email"] { margin-top: -0.75rem; }
.r-auth input::placeholder, .curator-apply-input::placeholder { color: var(--auth-muted); opacity: 0.7; }
.r-auth .login-form input:focus, .curator-apply-input:focus { outline: none; border-color: var(--auth-muted); }
.r-auth .login-form button, .code-button, .login-summary-primary, .login-summary-secondary,
.spotify-button, .spotify-disclaimer__button, .curator-apply-primary, .welcome-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 44px; margin: 0; padding: 0.75rem 1.15rem; border: 0; border-radius: 8px;
    background: var(--auth-ink); color: var(--rh-paper); font: 500 0.875rem/1.3 var(--rh-sans);
    letter-spacing: -0.015em; text-transform: none; text-decoration: none; cursor: pointer;
    transition: opacity 160ms ease, background-color 160ms ease;
}
.r-auth .login-form button, .code-button, .spotify-button, .curator-apply-primary { width: 100%; }
.r-auth .login-form button { margin-top: 0.25rem; }
.code-button.secondary, .login-summary-secondary, .spotify-button, .spotify-disclaimer__button { background: var(--auth-fill); color: var(--auth-ink); }
.spotify-disclaimer__button.is-primary { background: var(--auth-ink); color: var(--rh-paper); }
.spotify-button svg, .welcome-action-apple { width: 17px; height: 17px; flex: none; }
.r-auth .login-footnote { margin-top: 1.4rem; font-size: 0.85rem; }
.login-divider { margin: 1rem 0; color: var(--auth-muted); text-align: center; font-size: 0.8rem; }
.r-auth .auth-fineprint, .curator-apply-fineprint {
    margin: 1.5rem 0 0; color: var(--auth-muted); font: 400 0.75rem/1.6 var(--rh-sans); letter-spacing: 0; text-transform: none;
}
.r-auth :is(button, a):focus-visible, [data-curator-signup-fragment] :is(button, a):focus-visible {
    outline: 1px solid var(--auth-muted); outline-offset: 4px;
}
.r-auth button:disabled, .curator-apply-primary:disabled { opacity: 0.45; cursor: default; }
.code-overlay, .spotify-disclaimer {
    position: fixed; z-index: 180; inset: 0; display: none; align-items: center; justify-content: center;
    padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.2); overflow: auto; overscroll-behavior: contain;
}
.code-overlay.is-visible, .spotify-disclaimer.is-visible { display: flex; }
.code-card, .spotify-disclaimer__card {
    width: min(100%, 420px); max-height: 100%; overflow: auto; padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 16px; background: var(--rh-paper); color: var(--auth-ink); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
    animation: auth-enter 180ms ease both;
}
.r-auth .code-title { font-size: 1.75rem; }
.r-auth .code-email { margin-top: -0.6rem; font-size: 0.9rem; }
.code-status, .login-feedback-panel, .curator-apply-message {
    margin: 0; color: var(--auth-muted); font: 400 0.85rem/1.5 var(--rh-sans); overflow-wrap: anywhere;
}
.login-feedback-panel__title { display: none; }
.login-feedback-panel__body { margin: 0; }
.code-status.is-error, .login-feedback-panel.is-error, .curator-apply-message.is-error, .curator-apply-error, .curator-apply-counter.is-limit { color: var(--rh-danger); }
.code-inputs, .curator-apply-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; }
.code-inputs input, .curator-apply-otp input {
    width: 100%; min-width: 0; min-height: 54px; padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--auth-line); border-radius: 0;
    color: var(--auth-ink); background: transparent; font: 400 1.5rem/1.3 var(--rh-sans); text-align: center;
}
.code-inputs input:focus, .curator-apply-otp input:focus { outline: none; border-color: var(--auth-ink); }
.code-back, .curator-apply-secondary { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--auth-muted); font: 400 0.875rem/1.4 var(--rh-sans); text-decoration: none; cursor: pointer; }
.code-back { justify-self: center; }
.spotify-disclaimer__card { display: grid; gap: 1rem; }
.spotify-disclaimer__title { margin: 0; font: 500 1.5rem/1.2 var(--rh-sans); letter-spacing: -0.035em; text-transform: none; }
.spotify-disclaimer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* Application stages share their reading width and rhythm, including fragments. */
.curator-apply-stage-lead { position: static; margin: 0 0 1.75rem; padding: 0; background: none; text-align: left; }
.curator-apply-stage-lead::after { content: none; }
.curator-apply-copy { margin-top: 0.85rem; max-width: 42ch; }
.curator-apply-intro, .curator-apply-receipt { display: grid; justify-items: start; align-content: start; gap: 1.5rem; padding-top: 1rem; }
.curator-apply-intro-title { max-width: 12ch; font-size: clamp(2.5rem, 7vw, 4rem); }
.curator-apply-intro .curator-apply-copy { margin: 0; }
.curator-apply-intro .curator-apply-primary { width: auto; margin-top: 0.25rem; }
.curator-apply-eyebrow { margin: 0; color: var(--auth-muted); font-size: 0.8rem; }
.curator-apply-dismiss { display: block; min-width: 44px; min-height: 44px; margin: 0 0 0.5rem auto; border: 0; background: transparent; color: var(--auth-muted); font-size: 1.5rem; cursor: pointer; }
.curator-apply-form, .curator-apply-fields, .curator-apply-panel { display: grid; gap: 1.5rem; }
.curator-apply-form .curator-apply-stage-lead { margin-bottom: 0.25rem; }
.curator-apply-field { display: grid; gap: 0.4rem; min-width: 0; }
.curator-apply-label em { margin-left: 0.25rem; font-style: normal; opacity: 0.65; }
.curator-apply-textarea { min-height: 6rem; padding: 0.75rem; border: 1px solid transparent; border-radius: 8px; background: var(--auth-fill); resize: vertical; }
.curator-apply-textarea:focus { outline: none; border-color: var(--auth-line); }
.curator-apply-hint, .curator-apply-error, .curator-apply-counter { margin: 0; font-size: 0.75rem; line-height: 1.5; }
.curator-apply-counter { justify-self: end; color: var(--auth-muted); font-variant-numeric: tabular-nums; }
.curator-apply-error:empty { display: none; }
.curator-apply-profile-fields { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.curator-apply-profile-inputs { display: grid; gap: 1.5rem; }
.curator-apply-image-field { min-width: 0; display: grid; gap: 0.5rem; }
.curator-apply-image-button { width: 112px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--rh-skeleton-base); cursor: pointer; }
.curator-apply-image-frame { display: block; position: relative; aspect-ratio: 1; }
.curator-apply-image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.curator-apply-image-plus { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.curator-apply-image-plus::before, .curator-apply-image-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: var(--auth-muted); transform: translate(-50%, -50%); }
.curator-apply-image-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.curator-apply-image-button.has-image .curator-apply-image-plus { display: none; }
.curator-apply-image-button.is-uploading .curator-apply-image-plus { display: block; border: 1px solid var(--auth-muted); border-right-color: transparent; border-radius: 50%; animation: auth-spin 850ms linear infinite; }
.curator-apply-image-button.is-uploading .curator-apply-image-plus::before, .curator-apply-image-button.is-uploading .curator-apply-image-plus::after { content: none; }
.curator-apply-playlist-object { display: grid; min-height: 82px; }
.curator-apply-playlist-entry, .curator-apply-playlist-preview { grid-area: 1 / 1; min-width: 0; align-self: start; }
.curator-apply-playlist-preview { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; visibility: hidden; opacity: 0; transition: opacity 180ms ease; }
.curator-apply-playlist-object.is-preview .curator-apply-playlist-entry { visibility: hidden; }
.curator-apply-playlist-object.is-preview .curator-apply-playlist-preview { visibility: visible; opacity: 1; }
.curator-apply-playlist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; }
.curator-apply-fetch { min-height: 44px; padding: 0.5rem 0; border: 0; background: transparent; color: var(--auth-ink); font: 500 0.875rem/1.4 var(--rh-sans); cursor: pointer; }
.curator-apply-fetch:disabled { opacity: 0.5; cursor: wait; }
.curator-apply-preview-art { display: block; width: 64px; height: 64px; object-fit: cover; background: var(--rh-skeleton-base); }
.curator-apply-preview-title { margin: 0 0 0.25rem; color: var(--auth-ink); font: 500 1rem/1.3 var(--rh-sans); letter-spacing: -0.025em; text-transform: none; overflow-wrap: anywhere; }
.curator-apply-preview-meta { margin: 0; color: var(--auth-muted); font-size: 0.75rem; line-height: 1.4; }
.curator-apply-progress { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; color: var(--auth-muted); font-size: 0.75rem; }
.curator-apply-progress-line { position: relative; flex: 1; height: 1px; background: var(--auth-line); }
.curator-apply-progress-line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--curator-apply-progress); background: var(--auth-muted); }
.curator-apply-progress-complete, .curator-apply-progress.is-complete .curator-apply-progress-step { display: none; }
.curator-apply-progress.is-complete .curator-apply-progress-complete { display: inline; }
.curator-apply-email { margin: 0.5rem 0 0; color: var(--auth-muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.curator-apply-secondary-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.curator-apply-receipt-card { width: 112px; padding: 0; margin: 0 0 1rem; }
.curator-apply-receipt-card img { width: 112px; aspect-ratio: 1; object-fit: cover; background: var(--rh-skeleton-base); border-radius: 4px; }
.curator-apply-receipt-name { margin-top: 0.5rem; font-size: 0.875rem; color: var(--auth-ink); }
.curator-apply-panel[hidden], .curator-apply-image-frame img[hidden] { display: none; }
.welcome-shell { padding-top: clamp(2rem, 8vh, 5rem); }
.r-auth .welcome-copy { margin-top: 1rem; max-width: 30ch; }
.welcome-action { margin-top: 1.75rem; }
@media (hover: hover) {
    .r-auth .login-form button:hover, .code-button:hover, .curator-apply-primary:hover, .welcome-action:hover { opacity: 0.85; }
    .curator-apply-secondary:hover, .code-back:hover { color: var(--auth-ink); }
}
@media (max-width: 480px) {
    .curator-apply-profile-fields { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .curator-apply-image-field { justify-items: start; }
    .curator-apply-playlist-preview { grid-template-columns: 56px minmax(0, 1fr); }
    .curator-apply-preview-art { width: 56px; height: 56px; }
    .curator-apply-change-playlist { grid-column: 2; justify-self: start; }
}
@keyframes auth-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .r-auth main *, [data-curator-signup-fragment] * { animation: none; transition: none; }
}