/* 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 the theme files 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);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.auth-message.success {
    border-color: var(--ok);
    color: var(--ok);
    background-color: var(--bg-secondary);
}

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

.auth-alt a {
    color: var(--theme-primary);
    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);
    color: var(--text-primary);
}

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

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

.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);
    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);
    color: var(--text-primary);
}

.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);
}

/* 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);
    color: var(--text-on-accent);
    vertical-align: middle;
}

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

/* Neither good news nor bad.
 *
 * "Checkout cancelled. Nothing was charged." used to wear .error and show in
 * red, which reads as a failure when it is a reassurance: the visitor chose to
 * back out and the sentence exists to tell them no money moved. Red made a
 * deliberate act look like a fault, on the page where a fault costs a sale.
 *
 * Same reason the post-payment "sign in to unlock it" message stopped being an
 * error on 2026-08-29. Somebody who has just paid should never be shown a red
 * box about it.
 */
.auth-message.notice {
    border-color: var(--border-light);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

/* Certificates kept on the account. */
.receipt-row .account-value { word-break: break-word; }
.receipt-pulse { color: var(--text-secondary); font-size: .9em; }