/* /profile only. Everything is under body.Profile because every page stylesheet
   loads on every page. */

/* Page::usesWebFont() loads Montserrat and adds .modern-type, but moved.css
   pins the system stack again on `body, button, input, select, textarea`.
   body.Profile is (0,1,1) against its (0,0,1), so this wins without
   !important. Form controls are listed because moved.css gives them their own
   rule, which inheritance from body would not reach. */
body.Profile,
body.Profile button,
body.Profile input,
body.Profile select,
body.Profile textarea {
    font-family: 'Montserrat', sans-serif;
}


body.Profile .pf {
    --pf-ink: #25153c;
    --pf-muted: #6c5393;
    --pf-line: rgba(230, 219, 240, 0.5);
    --pf-line-solid: #e6dbf0;
    --pf-card: rgba(255, 255, 255, 0.5);
    --pf-brand: #7e60f6;
    --pf-brand-soft: #f4f1fe;
    /* Same red the Sign out row already uses, so the page has one danger colour
       rather than two. */
    --pf-danger: #dc2626;
    --pf-danger-soft: #fef2f2;
    --pf-danger-line: #f7c9c9;

    display: flex;
    flex-direction: column;
    gap: 24px;

    /* The shell hands the page 15px and a blue-grey #152334. The design runs on
       16px and the ink token, and everything not sized explicitly was
       inheriting the wrong pair. */
    font-size: 16px;
    color: var(--pf-ink);

    /* The design's max-w-6xl mx-auto: a fixed column centred in whatever space
       the shell gives it. The shell's own container is full width and does not
       centre anything, so without the auto margins the page hangs off to the
       left of a wide window. 1088 is the 1152 box less its 32px of padding. */
    max-width: 1088px;
    margin-inline: auto;
}

/* ---- banner ---- */

body.Profile .pf-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    border-radius: 16px;
    background-image: linear-gradient(to right, #7e60f6, #bf4aa4, #ff914d);
    color: #ffffff;
}

body.Profile .pf-banner-copy { flex-grow: 1; min-width: 0; }

body.Profile .pf-banner h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

body.Profile .pf-banner-mail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
}

body.Profile .pf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: 600;
}

/* ---- stat cards ---- */

body.Profile .pf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

body.Profile .pf-stat {
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-card);
    padding: 24px;
}

body.Profile .pf-stat-icon {
    display: block;
    width: 32px;
    height: 32px;
    color: var(--pf-brand);
}

/* Each card takes its own colour off the brand ramp - the same three the
   banner gradient runs through, plus amber. Four identical purple icons read as
   one repeated element rather than four separate figures. */
body.Profile .pf-stat-icon--brand  { color: var(--pf-brand); }
body.Profile .pf-stat-icon--pink   { color: #bf4aa4; }
body.Profile .pf-stat-icon--orange { color: #ff914d; }
body.Profile .pf-stat-icon--amber  { color: #ffc157; }

body.Profile .pf-stat-n {
    display: block;
    margin-top: 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pf-ink);
}

body.Profile .pf-stat-k {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--pf-muted);
}

/* ---- cards ---- */

body.Profile .pf-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    align-items: start;
}

body.Profile .pf-card {
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    background: var(--pf-card);
    padding: 24px;
}

body.Profile .pf-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 24px;
    color: var(--pf-ink);
}

body.Profile .pf-card h2 > :is(i, svg) { width: 20px; height: 20px; color: var(--pf-brand); }

body.Profile .pf-card-sub {
    margin: 4px 0 20px;
    font-size: 14px;
    color: var(--pf-muted);
}

body.Profile .pf-sub-head {
    margin: 20px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--pf-line-solid);
    font-size: 14px;
    font-weight: 500;
    color: var(--pf-ink);
}

/* ---- form fields ---- */

body.Profile .pf-field { margin: 0 0 16px; }

body.Profile .pf-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--pf-ink);
}

body.Profile .pf-field input[type="text"],
body.Profile .pf-field select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--pf-line-solid);
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: var(--pf-ink);
}

/* The design leaves these as native selects, so its arrow sits wherever the
   platform puts it - hard against the edge on Chrome. Ours draws its own
   chevron instead: same lucide glyph as the rest of the page, inset by the
   field's own 12px, and identical on every browser. */
body.Profile .pf-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c5393' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

body.Profile .pf-field input[readonly] {
    background: #faf8fc;
    color: var(--pf-muted);
}

body.Profile .pf-field input[type="text"]:focus,
body.Profile .pf-field select:focus {
    outline: none;
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 3px rgba(126, 96, 246, 0.15);
}

body.Profile .pf-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--pf-muted);
}

body.Profile .pf-marketplaces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.Profile .pf-marketplaces label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--pf-line-solid);
    border-radius: 10px;
    font-size: 14px;
    color: var(--pf-ink);
    cursor: pointer;
}

body.Profile .pf-marketplaces input { margin: 0; }

/* ---- subscription plan ---- */

body.Profile .pf-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(126, 96, 246, 0.2);
    border-radius: 12px;
    /* Two-stop tint from the brand ramp - a flat fill reads as a disabled row. */
    background-image: linear-gradient(to right, rgba(126, 96, 246, 0.1), rgba(191, 74, 164, 0.1));
}

body.Profile .pf-plan-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--pf-ink);
}

body.Profile .pf-plan-note {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--pf-muted);
}

body.Profile .pf-badge {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--pf-brand);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

body.Profile .pf-badge--off { background: var(--pf-muted); }

body.Profile .pf-rows { margin-top: 18px; }

body.Profile .pf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

body.Profile .pf-row dt {
    font-size: 14px;
    /* moved.css sets a bare `dt { font-weight: 700 }`, which made these labels
       heavier than the values they label. */
    font-weight: 400;
    color: var(--pf-muted);
}

body.Profile .pf-row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--pf-ink);
}

/* ---- account actions ---- */

body.Profile .pf-action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 8px 16px;
    border: 1px solid var(--pf-line-solid);
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    color: var(--pf-ink);
    text-decoration: none;
}

body.Profile .pf-action:hover { background: #faf8fc; }
body.Profile .pf-action :is(i, svg) { width: 16px; height: 16px; color: var(--pf-muted); }
body.Profile .pf-action--danger,
body.Profile .pf-action--danger :is(i, svg) { color: var(--pf-danger); }

/* Stacked full-width actions - the change-password disclosure and Sign out.
   The gap lives here rather than on the rows so it stays the same whether the
   disclosure is open or shut. */
body.Profile .pf-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Buttons. The page was picking these up from extra.css, where the fill rules
   are written against `button` - so <button class="btn primary"> came out solid
   purple and <a class="btn primary"> came out as a small outlined pill. Same
   class, two different buttons. Both are stated here instead. */
body.Profile .pf .btn {
    box-sizing: border-box;
    height: 40px;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    text-decoration: none;
    /* extra.css draws a.primary with a 3px solid outline rather than a border.
       An outline sits outside the box and takes no part in its shape, which is
       what made these read as stuck on rather than part of the card. */
    outline: none !important;
}

body.Profile .pf .btn.primary {
    background: var(--pf-brand) !important;
    border: 1px solid var(--pf-brand) !important;
    color: #ffffff !important;
}

body.Profile .pf .btn.primary:hover {
    background: #6d4de4 !important;
    border-color: #6d4de4 !important;
}

/* The card-footer action in the design is quiet: it sits under the content it
   belongs to and does not compete with Save changes. */
body.Profile .pf-card > .pf-actions-foot .btn {
    flex-grow: 1;
    background: #ffffff !important;
    border: 1px solid var(--pf-line-solid) !important;
    color: var(--pf-ink) !important;
}

body.Profile .pf-card > .pf-actions-foot .btn:hover {
    background: #faf8fc !important;
    border-color: var(--pf-brand) !important;
    color: var(--pf-brand) !important;
}

body.Profile .pf-actions-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ---- placeholders ----
   Values the design shows and we do not store yet. Marked so nobody reads them
   as this account's real figures, and grouped in one place in profilePage.php so
   they come out together once there is something behind them. */

body.Profile .pf-demo { color: var(--pf-muted); font-weight: 500; }

body.Profile .pf-demo-tag {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- section headings kept from the old page ---- */

body.Profile .pf-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 0;
}

body.Profile .pf-section-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--pf-ink);
}

body.Profile .pf-balance {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--pf-muted);
}

@media (max-width: 640px) {
    body.Profile .pf-banner { flex-direction: column; align-items: flex-start; }
}

/* ---- included-features list on the plan card ---- */

body.Profile .pf-features {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pf-muted);
    font-size: 14px;
}

body.Profile .pf-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

body.Profile .pf-features li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--pf-brand);
}

body.Profile .pf-saved {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(15, 122, 82, 0.25);
    border-radius: 10px;
    background: rgba(15, 122, 82, 0.08);
    color: #0f7a52;
    font-size: 14px;
    font-weight: 600;
}

/* ---- security card ----
   <details> gives the disclosure with no script; the summary is styled as one
   of the action rows so the closed state reads the same as Sign out below it. */

body.Profile .pf-details summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}

body.Profile .pf-details summary::-webkit-details-marker { display: none; }

body.Profile .pf-details summary::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c5393' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transition: transform 0.2s;
}

body.Profile .pf-details[open] summary::after { transform: rotate(180deg); }

body.Profile .pf-details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body.Profile .pf-details-body {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--pf-line-solid);
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

body.Profile .pf-field input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--pf-line-solid);
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: var(--pf-ink);
}

body.Profile .pf-field input[type="password"]:focus {
    outline: none;
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 3px rgba(126, 96, 246, 0.15);
}

body.Profile .pf-field .pf-hint { display: block; }

/* Flash messages from AbstractController. */

body.Profile .pf .alert {
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

body.Profile .pf .alert.success {
    border: 1px solid rgba(15, 122, 82, 0.25);
    background: rgba(15, 122, 82, 0.08);
    color: #0f7a52;
}

body.Profile .pf .alert.error {
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

/* ---- paragraph spacing ----
   react.css carries `p { margin-bottom: 0 !important }`, which flattened every
   <p> on this page: the card sub-lines sat straight on the first field and the
   fields had no gap between them at all. Nothing without !important can beat a
   bare-element rule that has it, so the spacing is restated here in one block
   rather than each rule above growing its own override.

   The gaps are the design's: 6px from a card title to its sub-line, 24px from
   there to the first field, 16px between fields. */

body.Profile .pf-card-sub { margin: 6px 0 24px !important; }
body.Profile .pf-field { margin: 0 0 16px !important; }
body.Profile .pf-hint { margin: 6px 0 0 !important; }
body.Profile .pf-plan-note { margin: 2px 0 0 !important; }
body.Profile .pf-balance { margin: 2px 0 0 !important; }
body.Profile .pf-banner-mail { margin: 6px 0 0 !important; }
body.Profile .pf-plan-name { margin: 0 !important; }

/* ---- avatar ---- */

body.Profile .pf-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

body.Profile .pf-avatar {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* The design lifts the avatar off the gradient with a white ring and a
       shadow; without them it reads as a hole punched in the banner. */
    border: 4px solid #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pf-brand);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.Profile .pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover the picture and the controls come up over it - no extra chrome sitting
   in the banner for something you touch once. Kept on for keyboard focus, so
   the camera is reachable without a pointer. */
body.Profile .pf-avatar-overlay {
    position: absolute;
    inset: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

body.Profile .pf-avatar-wrap:hover .pf-avatar-overlay,
body.Profile .pf-avatar-wrap:focus-within .pf-avatar-overlay {
    opacity: 1;
}

body.Profile .pf-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px;
    background: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer;
}

body.Profile .pf-avatar-btn :is(i, svg) {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

body.Profile .pf-avatar-btn:hover { background: rgba(255, 255, 255, 0.25) !important; }

/* Nothing to remove until there is a picture. */
body.Profile .pf-avatar-wrap:not(.has-picture) .pf-avatar-btn--remove { display: none; }

body.Profile .pf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.Profile .pf-visually-hidden:focus-visible + .pf-avatar-overlay .pf-avatar-btn {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Shown in place of the controls while a file is on its way up. */
body.Profile .pf-avatar-spinner {
    position: absolute;
    inset: 4px;
    display: none;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.5);
}

body.Profile .pf-avatar-spinner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 9999px;
    animation: pf-spin 0.7s linear infinite;
}

body.Profile .pf-avatar-wrap.is-busy .pf-avatar-spinner { display: block; }
body.Profile .pf-avatar-wrap.is-busy .pf-avatar-overlay { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
    body.Profile .pf-avatar-spinner::after { animation-duration: 2s; }
    body.Profile .pf-avatar-overlay { transition: none; }
}

/* ---- subscription notices and cancellation ---- */

/* A standing state the customer should read before the numbers below it: the
   plan is set to stop, or collection is paused. */
body.Profile .pf-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0 !important;
    padding: 10px 12px;
    border: 1px solid var(--pf-line-solid);
    border-radius: 10px;
    background: var(--pf-brand-soft);
    font-size: 13px;
    color: var(--pf-ink);
}

body.Profile .pf-notice :is(i, svg) {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--pf-brand);
}

/* Cancelling is behind a disclosure for the same reason the password form is:
   it is one click away, not zero, and the consequence is spelled out before the
   button that carries it out. */
body.Profile .pf-details--danger {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pf-line);
}

body.Profile .pf-details--danger .pf-details-body {
    border-color: var(--pf-danger-line);
    background: var(--pf-danger-soft);
}

body.Profile .pf .btn.danger {
    background: var(--pf-danger) !important;
    border: 1px solid var(--pf-danger) !important;
    color: #ffffff !important;
}

body.Profile .pf .btn.danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* ---- recent activity ---- */

body.Profile .pf-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.Profile .pf-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pf-line);
}

body.Profile .pf-feed-item:last-child { border-bottom: 0; }

body.Profile .pf-feed-item > :is(i, svg) {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--pf-brand);
}

body.Profile .pf-feed-copy {
    flex-grow: 1;
    min-width: 0;
}

body.Profile .pf-feed-action {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--pf-ink);
}

/* The detail is whatever the user typed or named, so it can be long. One line,
   cut with an ellipsis, rather than a wrapped paragraph that reflows the row. */
body.Profile .pf-feed-detail {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--pf-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.Profile .pf-feed-item time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--pf-muted);
    white-space: nowrap;
}

/* The two card rows and the save button are children of the profile form, which
   sits inside .pf as a single flex item - so .pf's own gap does not reach them
   and the rows would otherwise touch. Same 24px rhythm as the rest of the page. */
body.Profile .userProfileForm {
    display: flex;
    flex-direction: column;
    gap: 24px;
}