/* Account pages (login / register / account).
 *
 * Deliberately thin. The layout classes come from site-settings.css
 * (.settings-content, .settings-section, .setting-item, .setting-input,
 * .save-btn) and every colour is a themes.css custom property, so these pages
 * follow the site's colour scheme and day/night mode with no extra work.
 * Only the pieces the settings page has no equivalent for live here. */

.auth-content {
    max-width: 480px;
}

.auth-form .setting-item:last-of-type {
    margin-bottom: 20px;
}

.auth-form .setting-input {
    max-width: 100%;
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-actions .save-btn {
    margin-left: 0;
}

/* Feedback banner. Hidden until a request comes back. */
.auth-message {
    display: none;
    margin-bottom: 15px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid;
    font-weight: 700;
}

.auth-message.show {
    display: block;
}

.auth-message.error {
    border-color: var(--theme-primary, #cc0000);
    color: var(--theme-primary, #cc0000);
    background-color: var(--bg-secondary, #ffffff);
}

.auth-message.success {
    border-color: #2e7d32;
    color: #2e7d32;
    background-color: var(--bg-secondary, #ffffff);
}

/* "Don't have an account?" line under the form. */
.auth-alt {
    margin-top: 18px;
    font-size: 0.9em;
    color: var(--text-secondary, #666);
}

.auth-alt a {
    color: var(--theme-primary, #cc0000);
    font-weight: 700;
}

/* Account details list. */
.account-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, #ccc);
    color: var(--text-primary, #000);
}

.account-row:last-child {
    border-bottom: none;
}

.account-row .account-label {
    color: var(--text-secondary, #666);
}

.account-row .account-value {
    font-weight: 700;
    word-break: break-all;
    text-align: right;
}

/* Shown while /api/auth/me is in flight, so the page doesn't flash a form at
 * someone who is already signed in. */
.auth-loading {
    color: var(--text-secondary, #666);
    font-style: italic;
    /* Holds roughly the height the loaded panel will occupy. Without it the
       page is one line tall for the second or so the account call takes, so
       the footer paints near the top and then jolts down when the content
       arrives. A viewport unit rather than a pixel figure because these pages
       fill about a screen on any device, and a fixed height would be wrong on
       one of them. */
    min-height: 60vh;
}

[hidden] {
    display: none !important;
}

/* ── Active sessions ──────────────────────────────────────────────
   One row per signed-in device. Laid out like .account-row above it so the
   panel reads as part of the same page rather than a widget dropped into it. */
.session-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, #ccc);
    color: var(--text-primary, #000);
}

.session-row:last-child {
    border-bottom: none;
}

.session-what {
    min-width: 0;
}

.session-when {
    margin-top: 2px;
    font-size: 0.85em;
    color: var(--text-secondary, #666);
}

/* The device you are reading this on, so nobody signs themselves out looking
   for the intruder. */
.session-badge {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--theme-primary, #cc0000);
    color: #ffffff;
    vertical-align: middle;
}

.session-row .session-end {
    flex: 0 0 auto;
    margin: 0;
}