/* ══════════════════════════════════════════════════════════════
   Notespark — Settings

   app.css still gives Settings a full-bleed indigo gradient banner
   (line ~2087), left over from before the light-theme pass. Against
   white cards it reads as a different app, and on a phone it eats a
   third of the first screen before any content.

   Flat white header instead: same violet accent, but spent on the
   back link and the save buttons rather than a slab.

   Load AFTER app.css. Selectors carry .nota.theme-light so they beat
   app.css's plain .settings-* rules regardless of file order.
   ══════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────── */

.nota.theme-light .settings-hero {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding: 22px 40px 20px;
}

.nota.theme-light .settings-hero-title {
    color: #13132b;
    font-size: 22px;
    letter-spacing: -0.3px;
}

.nota.theme-light .settings-hero-sub {
    color: #6b7280;
}

/* Back link — the one place the accent shows in the header, and it
   points at the thing you actually want (getting out). */
.nota.theme-light .settings-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    padding: 5px 9px 5px 7px;
    margin-left: -7px;
    color: #6C5CE7;
    background: none;
}

    .nota.theme-light .settings-back:hover {
        background: rgba(108, 92, 231, .08);
        color: #5A4BD6;
    }

/* ── Body ───────────────────────────────────────────────────────
   Explicit neutral rather than var(--n-main): that token is still a
   warm value in nota-layout.css, which tinted the whole page beige. */

.nota.theme-light .settings-page {
    background: #f7f8fa;
}

.nota.theme-light .settings-body {
    padding: 22px 40px 60px;
    max-width: 820px;
}

.nota.theme-light .settings-card {
    border-color: rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

/* The Account card was tinted with a warm surface token. White, like
   every other card — it's separated by its own border already. */
.nota.theme-light .settings-card-muted {
    background: #ffffff;
}

/* ── Account details ────────────────────────────────────────────
   Was a 2×2 grid of half-width cells, which truncates an email to
   "brannanmike@ou…" and shows a notebook count in a column wide
   enough for a paragraph. Hairline-separated rows instead: label
   left, value right, full width available to whichever needs it. */

.nota.theme-light .account-info-grid {
    display: block;
    padding: 4px 24px 20px;
}

.nota.theme-light .account-info-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

    .nota.theme-light .account-info-item:last-child {
        border-bottom: none;
    }

.nota.theme-light .ai-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
}

.nota.theme-light .ai-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    color: #13132b;
    overflow-wrap: anywhere; /* long emails wrap rather than clip */
}

/* ── Save buttons — accent, not the old hardcoded #4F46E5 ────── */

.nota.theme-light .settings-page .btn-save {
    background: #6C5CE7;
    box-shadow: none;
}

    .nota.theme-light .settings-page .btn-save:hover:not(:disabled) {
        background: #5A4BD6;
    }

    .nota.theme-light .settings-page .btn-save:disabled {
        opacity: .55;
        cursor: default;
    }

/* ══ MOBILE ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .nota.theme-light .settings-hero {
        padding: 14px 18px 12px;
    }

    .nota.theme-light .settings-hero-title {
        font-size: 19px;
        margin-bottom: 2px;
    }

    .nota.theme-light .settings-hero-sub {
        display: none;
    }

    .nota.theme-light .settings-back {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .nota.theme-light .settings-body {
        padding: 14px 14px 90px; /* bottom clears the tab bar */
        gap: 14px;
    }

    .nota.theme-light .settings-card {
        border-radius: 12px;
    }

    /* The real culprit for truncated inputs: .field-row is a fixed
       1fr 1fr grid, so "Confirm new password" got half a phone. */
    .nota.theme-light .field-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .nota.theme-light .settings-fields {
        padding: 0 16px;
    }

    .nota.theme-light .account-info-grid {
        padding: 4px 16px 16px;
    }

    /* Stack label over value once the row gets tight — a right-aligned
       value opposite its label starts colliding below ~380px. */
    .nota.theme-light .account-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .nota.theme-light .ai-value {
        text-align: left;
    }

    /* Full-width save target: easier to hit with a thumb, and the
       footer has nothing else competing for the row. */
    .nota.theme-light .settings-card-footer {
        padding: 14px 16px;
    }

        .nota.theme-light .settings-card-footer .btn-save {
            width: 100%;
            padding: 12px 20px;
        }
}