/* Profile page — migrated from Profile.razor.css; scoped under .page-profile. */
.page-profile { display: flex; flex-direction: column; gap: 34px; }

.page-profile .profile-page { display: flex; flex-direction: column; gap: 28px; }

/* ── Photo ── */
.page-profile .photo-row {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.page-profile .avatar-lg {
    width: 96px;
    height: 96px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    font-size: 30px;
    font-weight: 700;
    color: #04201D;
    background: linear-gradient(140deg, #5EEAD9, #14B8A6);
}

.page-profile .avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-profile .photo-controls { display: flex; flex-direction: column; gap: 8px; }

.page-profile .btn-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

/* ── Details ── */
.page-profile .field-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 480px; }

.page-profile .readonly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.page-profile .readonly-value { margin: 6px 0 0; font-size: 14px; color: var(--text); }

.page-profile .saved-note { color: var(--good); font-weight: 600; }

/* ── Notifications ──
   The per-kind switches under the master one. Indented and rule-marked so they read as belonging to it,
   and dimmed as a set when it is off: the rows stay legible (a reader turning notifications back on needs
   to see what they will get) while looking as inert as the disabled inputs actually are.

   Every switch is one line and one size. Its label in the catalogue (NotificationCategory) says which
   email it is, so there is no second column of gloss beside it to align, to wrap, or to drop under the
   label on a narrow screen (§14). */
.page-profile .notify-master,
.page-profile .notify-kinds {
    display: grid;
    row-gap: 10px;
}

.page-profile .notify-kinds {
    margin-top: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--line);
    transition: opacity .15s ease;
}

.page-profile .notify-kinds.is-off { opacity: .45; }

.page-profile .notify-master .check-row,
.page-profile .notify-kinds .check-row {
    font-size: 13px;
    line-height: 1.45;
}

/* ── Appearance ── */
.page-profile .theme-toggle { display: inline-flex; border: 1px solid var(--line); }

.page-profile .theme-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.page-profile .theme-opt + .theme-opt { border-left: 1px solid var(--line); }
.page-profile .theme-opt:hover:not(:disabled) { color: var(--text); background: rgba(127, 127, 127, 0.08); }
.page-profile .theme-opt:disabled { opacity: .5; cursor: default; }

.page-profile .theme-opt.is-active { color: var(--accent-2); background: var(--accent-soft); }

.page-profile .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }
.page-profile .swatch-dark { background: #131517; }
.page-profile .swatch-light { background: #F4F5F7; }