/* =============================================================================
   Auth pages (login, register, forgot-password, reset-password, accept-invite)
   Pearl design, scoped to body.auth-page. Colours, light and dark, come from
   tokens.css (theme.js picks the palette before first paint). The one
   exception is the sign-in panel's light pin, which restates the light token
   values; --tc-violet and --tc-cyan are used for decoration only.
   This file is also loaded by signed-in app pages; the rules they use are in
   the block at the end and are unchanged.
   ============================================================================= */

.auth-page,
.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-page {
    margin: 0;
    background: var(--tc-pearl);
    color: var(--tc-ink);
    font-family: var(--tc-font);
    font-size: 15px;
    line-height: 1.5;
}

.auth-page h1,
.auth-page h2,
.auth-page p {
    margin: 0;
}

.auth-page a {
    color: var(--tc-violet-text);
}

.auth-page a:hover {
    color: var(--tc-ink);
}

.auth-page a:focus-visible,
.auth-page button:focus-visible {
    outline: none;
    box-shadow: var(--tc-focus-ring);
    border-radius: 6px;
}

/* --- Shell: left card, optional right panel --- */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(8px, 1.2vw, 14px);
    display: flex;
    gap: clamp(8px, 1.2vw, 14px);
}

.auth-main {
    flex: 1 1 0;
    min-width: 0;
    background: var(--tc-surface);
    border-radius: 28px;
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
}

.auth-page .auth-logo {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.03em;
    color: var(--tc-ink);
    text-decoration: none;
}

.auth-logo-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--tc-violet), var(--tc-cyan));
}

.auth-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-heading h1 {
    font-weight: var(--tc-heading-weight);
    font-size: clamp(30px, 3.4vw, 38px);
    line-height: 1.08;
    letter-spacing: var(--tc-heading-tracking);
}

.auth-subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: var(--tc-muted);
}

/* --- Fields (scoped; the unscoped .form-group rules below serve app pages) --- */
.auth-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.auth-page .form-group label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--tc-ink);
}

.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.auth-label-row a {
    font-size: 14px;
    font-weight: 500;
}

.auth-page .form-group input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--tc-input-line);
    border-radius: var(--tc-radius-inner);
    background: var(--tc-surface);
    color: var(--tc-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-page .form-group input::placeholder {
    color: var(--tc-muted);
}

.auth-page .form-group input:focus {
    outline: none;
    border-color: var(--tc-violet-text);
    box-shadow: var(--tc-focus-ring);
}

.auth-page .form-group .input-hint {
    margin: 0;
    font-size: 13px;
    color: var(--tc-muted);
}

.input-error {
    display: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--tc-violet-text);
}

/* Password field with show/hide button */
.auth-password {
    position: relative;
}

.auth-page .auth-password input {
    padding-right: 52px;
}

.auth-pw-toggle {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--tc-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-pw-toggle:hover {
    color: var(--tc-ink);
}

.auth-page .auth-pw-toggle:focus-visible {
    border-radius: 14px;
}

.auth-pw-toggle .icon-hide,
.auth-pw-toggle[aria-pressed="true"] .icon-show {
    display: none;
}

.auth-pw-toggle[aria-pressed="true"] .icon-hide {
    display: block;
}

/* --- Messages (the page scripts toggle .visible) --- */
.auth-error,
.auth-success {
    display: none;
    padding: 12px 16px;
    border-radius: var(--tc-radius-inner);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tc-ink);
}

.auth-error {
    background: var(--tc-lilac);
    border-left: 4px solid var(--tc-violet-text);
}

.auth-success {
    background: var(--tc-pearl);
    border: 1px solid var(--tc-line);
}

.auth-error.visible,
.auth-success.visible {
    display: block;
}

/* --- Primary button (also styles the link reset-password.js adds) --- */
.btn-auth {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-primary);
    color: var(--tc-on-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-auth:hover {
    background: var(--tc-primary-hover);
}

.auth-page a.btn-auth,
.auth-page a.btn-auth:hover {
    color: var(--tc-on-primary);
    text-decoration: none;
}

.auth-page .btn-auth:focus-visible {
    border-radius: var(--tc-radius-pill);
}

.btn-auth:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-footer {
    text-align: center;
    font-size: 14px;
    color: var(--tc-muted);
}

.auth-footer a {
    font-weight: 600;
}

/* --- Legal footer at the bottom of the card --- */
.auth-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--tc-muted);
}

.auth-legal-links {
    display: flex;
    gap: 16px;
}

.auth-page .auth-legal a {
    color: var(--tc-muted);
}

.auth-page .auth-legal a:hover {
    color: var(--tc-ink);
}

/* =============================================================================
   Sign-in panel: "draft, then check". Without .is-live (no JS, reduced
   motion) it shows the finished state. auth-panel.js adds .is-live and the
   per-item state classes; every item stays in the layout, so nothing shifts.
   It keeps the light pearl palette in both themes, so the tokens are pinned
   to their light values here and its text colour is set again.
   ============================================================================= */

.auth-panel {
    --tc-pearl: #F3F1FF;
    --tc-surface: #FFFFFF;
    --tc-surface-2: #F3F1FF;
    --tc-lilac: #E4DFFF;
    --tc-line: #E2DEF7;
    --tc-ink: #1B1640;
    --tc-muted: #57527A;
    --tc-violet-text: #5546E0;
    --tc-primary: #1B1640;
    --tc-primary-hover: #2E2860;
    --tc-on-primary: #FFFFFF;
    --tc-input-line: #8A84B2;
    color: var(--tc-ink);
    color-scheme: light;
    flex: 1.25 1 0;
    min-width: 0;
    border-radius: 28px;
    background: var(--tc-mesh);
    background-size: 300% 300%;
    animation: auth-mesh 18s ease-in-out infinite;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    container-type: inline-size;
}

@keyframes auth-mesh {
    0% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 40%; }
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
    .auth-panel {
        display: none;
    }
}

.ap-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--tc-surface);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(27, 22, 64, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.6s ease;
}

.ap-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--tc-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ap-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-pearl);
}

.ap-chip-ink {
    background: var(--tc-ink);
    color: var(--tc-surface);
}

.ap-question {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.ap-grid {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
}

.ap-steps {
    padding: 16px 18px;
    border-right: 1px solid var(--tc-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ap-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tc-muted);
}

.ap-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ap-step {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tc-ink);
    transition: color 0.4s ease;
}

.ap-step-icon {
    position: relative;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.ap-spin,
.ap-check {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.ap-spin {
    border: 2px solid var(--tc-line);
    border-top-color: var(--tc-violet);
    opacity: 0;
    animation: auth-spin 0.8s linear infinite;
}

.ap-check {
    background: var(--tc-ink);
    color: var(--tc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ap-stats {
    margin-top: 4px;
    font-size: 11px;
    color: var(--tc-muted);
    transition: opacity 0.4s ease;
}

.ap-draft {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 340px;
}

.ap-sentences {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.ap-sentence {
    text-decoration: underline wavy transparent;
    text-underline-offset: 4px;
    transition: opacity 0.5s ease, transform 0.5s ease, text-decoration-color 0.4s ease;
}

.ap-sentence.is-flag {
    text-decoration-color: var(--tc-violet-text);
}

.ap-cite {
    font-size: 10px;
    font-weight: 700;
    color: var(--tc-violet-text);
    margin-left: 2px;
    transition: opacity 0.4s ease;
}

.ap-sources {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-source {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--tc-pearl);
    font-size: 12px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ap-source > span:first-child {
    min-width: 0;
}

.ap-source strong {
    font-weight: 700;
    color: var(--tc-violet-text);
}

.ap-state {
    flex: 0 0 auto;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-ink);
    color: var(--tc-surface);
}

.ap-state-check {
    background: var(--tc-lilac);
    color: var(--tc-ink);
}

.ap-caption {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
}

.ap-caption h2 {
    font-weight: var(--tc-heading-weight);
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.08;
    letter-spacing: var(--tc-heading-tracking);
}

.ap-caption p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tc-muted);
}

/* Narrow panel (about 861-1100px viewports): stack the two columns so the
   source rows have room for their state pills. */
@container (max-width: 600px) {
    .ap-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-steps {
        border-right: 0;
        border-bottom: 1px solid var(--tc-line);
    }

    .ap-step-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
    }

    .ap-draft {
        min-height: 0;
    }
}

/* Live (animated) states */
.is-live .ap-step:not(.is-done):not(.is-active) { color: var(--tc-muted); }
.is-live .ap-step.is-active .ap-spin { opacity: 1; }
.is-live .ap-step:not(.is-done) .ap-check { opacity: 0; transform: scale(0.6); }
.is-live .ap-stats:not(.is-shown) { opacity: 0; }
.is-live .ap-sentence:not(.is-shown) { opacity: 0; transform: translateY(8px); }
.is-live .ap-sentence:not(.is-cited) .ap-cite { opacity: 0; }
.is-live .ap-sentence.is-flag:not(.is-flagged) { text-decoration-color: transparent; }
.is-live .ap-source:not(.is-shown) { opacity: 0; transform: translateY(6px); }
.is-live .ap-card.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .auth-panel,
    .ap-spin {
        animation: none;
    }
}

/* =============================================================================
   Used by signed-in app pages that load this file. Unchanged.
   ============================================================================= */

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.4rem;
}

.form-group input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.form-group .input-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.3rem;
}

/* User info in nav */
.nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.nav-user-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

.nav-user .btn-logout {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.nav-user .btn-logout:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-success {
    background-color: #38a169;
    color: white;
}

.btn-success:hover {
    background-color: #2f855a;
}