/*
    Settings > Update Account (upa-*): the profile hero (the mobile AccountPage avatar stack with a live ring over the
    Settings grey family and the two couple glows), the account in numbers, the three form cards, the security card,
    the timeline and the plan card. Dark follows data-bs-theme="dark" on <html>.
*/

:root {
    --upa-text: var(--set-text);
    --upa-muted: var(--set-muted);
    --upa-light: var(--set-light);
    --upa-card: var(--set-card);
    --upa-border: var(--set-card-border);
    --upa-surface: var(--set-surface);
    --upa-violet: var(--set-ink);
    --upa-violet-soft: var(--set-icon-bg);
    --upa-user: #2563EB;
    --upa-partner: #D97706;
    --upa-aqua: #0D9488;
    --upa-aqua-soft: #CCFBF1;
    --upa-blue: #2563EB;
    --upa-blue-soft: #DBEAFE;
    --upa-positive: #16A34A;
    --upa-caution: #B45309;
    --upa-critical: #DC2626;
    --upa-hero-bg: var(--set-hero-bg);
    --upa-hero-border: var(--set-hero-border);
    --upa-glass: var(--set-glass);
    --upa-glass-border: var(--set-glass-border);
    --upa-shadow: 0 18px 44px -26px rgba(31, 36, 64, .35);
    --upa-focus: var(--set-focus);
    --upa-glow-user: var(--set-glow-user);
    --upa-glow-partner: var(--set-glow-partner);
}

[data-bs-theme="dark"] {
    --upa-user: #60A5FA;
    --upa-partner: #FBBF24;
    --upa-aqua: #2DD4BF;
    --upa-aqua-soft: #163A3B;
    --upa-blue: #60A5FA;
    --upa-blue-soft: #1E3354;
    --upa-positive: #22C55E;
    --upa-caution: #FBBF24;
    --upa-critical: #F87171;
    --upa-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7);
}

.upa-page { color: var(--upa-text); }
.upa-page * { box-sizing: border-box; }
.upa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.upa-head-titles { min-width: 0; max-width: 46rem; }
.upa-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Buttons */
.upa-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
    white-space: nowrap;
}

.upa-btn:focus-visible { outline: none; box-shadow: var(--upa-focus); }
.upa-btn:disabled { opacity: .55; cursor: not-allowed; }
.upa-btn:not(:disabled):hover { transform: translateY(-1px); }
.upa-btn-lg { padding: .8rem 1.3rem; font-size: .95rem; border-radius: 14px; }
.upa-btn-primary { color: #fff; background: var(--set-accent); box-shadow: 0 10px 22px -14px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .7); }
.upa-btn-primary:not(:disabled):hover { filter: saturate(1.1) brightness(1.04); color: #fff; }
.upa-btn-glass { color: var(--upa-text); background: var(--upa-glass); border-color: var(--upa-border); backdrop-filter: blur(10px); }
.upa-btn-glass:not(:disabled):hover { color: var(--upa-text); background: var(--upa-card); }
.upa-spin { animation: upa-spin 1s linear infinite; }
@keyframes upa-spin { to { transform: rotate(360deg); } }

/* The hero */
.upa-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.6rem 1.6rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--upa-hero-border);
    border-radius: 20px;
    background: var(--upa-hero-bg);
    box-shadow: var(--upa-shadow);
}

.upa-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.upa-glow { position: absolute; inset: 0; }
.upa-glow-user { background: var(--upa-glow-user); }
.upa-glow-partner { background: var(--upa-glow-partner); }
.upa-gridlines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(91, 100, 117, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(91, 100, 117, .07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 20% 30%, #000 10%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 10%, transparent 65%);
}

[data-bs-theme="dark"] .upa-gridlines { background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); }

.upa-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem; align-items: center; }

/* The avatar stack (mirrors the mobile AccountPage): user in front with a live ring, partner smaller and tucked behind */
.upa-stack { --upa-main: 148px; --upa-small: 84px; position: relative; width: calc(var(--upa-main) + var(--upa-small) * .55); height: calc(var(--upa-main) + 8px); }
.upa-ring {
    position: absolute;
    left: -6px;
    top: -6px;
    width: calc(var(--upa-main) + 12px);
    height: calc(var(--upa-main) + 12px);
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--upa-user), var(--upa-partner), var(--upa-user));
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px));
    mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3px));
    animation: upa-ring 9s linear infinite;
    opacity: .9;
}

@keyframes upa-ring { to { transform: rotate(360deg); } }

.upa-av {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--upa-card);
    color: var(--upa-violet);
    box-shadow: 0 0 0 4px var(--upa-card), 0 .5rem 1.5rem rgba(0, 0, 0, .28);
    text-decoration: none;
}

.upa-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upa-av--user { left: 0; top: 0; width: var(--upa-main); height: var(--upa-main); z-index: 2; cursor: pointer; margin: 0; }
.upa-av--partner { right: 0; bottom: 0; width: var(--upa-small); height: var(--upa-small); z-index: 1; font-size: 2rem; box-shadow: 0 0 0 4px var(--upa-card), 0 0 0 6px var(--upa-partner), 0 .5rem 1.5rem rgba(0, 0, 0, .28); animation: upa-float 6s ease-in-out infinite; }
@keyframes upa-float { 50% { transform: translateY(-4px); } }
.upa-av--empty { background: var(--upa-card); border: 2px dashed color-mix(in srgb, var(--upa-partner) 60%, transparent); box-shadow: 0 0 0 4px var(--upa-card); color: var(--upa-partner); font-size: 1.6rem; transition: border-color .15s ease, color .15s ease; }
.upa-av--empty:hover { border-color: var(--upa-partner); }
.upa-initials { font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; background: linear-gradient(135deg, var(--set-icon-bg), var(--upa-card)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.upa-initials.is-small { font-size: 1.6rem; color: var(--upa-partner); background: linear-gradient(135deg, color-mix(in srgb, var(--upa-partner) 20%, var(--upa-card)), var(--upa-card)); }
.upa-cam {
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity .18s ease;
}

.upa-av--user:hover .upa-cam, .upa-av--user:focus-visible .upa-cam { opacity: 1; }

.upa-hero-copy { min-width: 0; }
.upa-name { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.upa-email { margin: .2rem 0 .7rem; color: var(--upa-muted); font-size: .9rem; word-break: break-all; }
.upa-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.upa-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--upa-glass-border); background: var(--upa-glass); color: var(--upa-muted); font-size: .76rem; font-weight: 600; backdrop-filter: blur(8px); }
.upa-pill.is-plan { color: var(--set-plan); background: var(--set-plan-soft); border-color: transparent; }
.upa-pill.is-free { color: var(--set-ink); }
.upa-pill.is-positive { color: var(--upa-positive); }
.upa-pill.is-caution { color: var(--upa-caution); }
.upa-pill.is-partner { color: var(--upa-partner); }

.upa-complete { display: grid; gap: .3rem; max-width: 30rem; margin-bottom: .8rem; }
.upa-complete-bar { display: block; height: 8px; border-radius: 999px; background: var(--upa-glass-border); overflow: hidden; }
.upa-complete-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--upa-user), var(--upa-partner)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.upa-complete-text { color: var(--upa-muted); font-size: .78rem; }

.upa-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.upa-upload {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--set-ink);
    background: var(--set-glass);
    border: 1px solid var(--set-card-border);
    transition: transform .15s ease, filter .15s ease;
}

.upa-upload:hover { transform: translateY(-1px); filter: brightness(.98); }
.upa-hint { color: var(--upa-light); font-size: .74rem; }
.upa-hint .is-pending { color: var(--upa-violet); font-weight: 600; }

/* The numbers */
.upa-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; margin-top: 1.3rem; }
/* Lit from the top-left like the mobile At a glance tiles (settings-theme.css .set-lit-tile draws the fill and the fading
   hairline; the border here is clear so the ring shows). */
.upa-stat { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border-radius: 14px; background: var(--set-tile-fill); border: 1px solid transparent; backdrop-filter: blur(10px); animation: upa-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.upa-stat:nth-child(2) { animation-delay: .05s; }
.upa-stat:nth-child(3) { animation-delay: .1s; }
.upa-stat:nth-child(4) { animation-delay: .15s; }
.upa-stat:nth-child(5) { animation-delay: .2s; }
.upa-stat:nth-child(6) { animation-delay: .25s; }
@keyframes upa-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.upa-stat-glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: .3rem; border-radius: 10px; background: var(--set-icon-bg); color: var(--set-icon); font-size: .85rem; }
[data-bs-theme="dark"] .upa-stat-label { color: var(--upa-light); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.upa-stat-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.upa-stat-value.is-text { font-size: 1.05rem; }
.upa-stat-caption { color: var(--upa-muted); font-size: .74rem; }

/* The cards */
.upa-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
.upa-main { display: grid; gap: 1rem; }
.upa-main form { display: grid; gap: 1rem; }
.upa-side { display: grid; gap: 1rem; }
.upa-card { padding: 1.1rem 1.2rem 1.2rem; border-radius: 20px; border: 1px solid var(--set-section-border); background: var(--set-section-bg); animation: upa-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.upa-card.is-plan { background: linear-gradient(158deg, color-mix(in srgb, #F6C453 18%, var(--upa-card)) 0%, var(--upa-card) 60%); border-color: color-mix(in srgb, #F6C453 45%, var(--upa-border)); }
.upa-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: 1rem; font-weight: 700; }
.upa-card-glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--set-icon-bg); color: var(--set-icon); font-size: .8rem; }
.upa-card.is-plan .upa-card-glyph { background: #F6C453; color: #3E3121; }
.upa-card-hint { flex-basis: 100%; margin-left: calc(30px + .55rem); color: var(--upa-light); font-size: .76rem; font-weight: 500; }
.upa-card-note { display: flex; gap: .45rem; align-items: flex-start; margin: .9rem 0 0; color: var(--upa-muted); font-size: .8rem; }
.upa-card-note i { margin-top: .2rem; color: var(--set-icon); }

.upa-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.upa-field { display: grid; align-content: start; align-self: start; gap: .3rem; margin: 0; min-width: 0; }
.upa-field.is-wide { grid-column: 1 / -1; }
.upa-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--upa-muted); }
.upa-req { color: var(--upa-critical); }
.upa-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .62rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--upa-border);
    background-color: var(--upa-card);
    background-image: none;
    color: var(--upa-text);
    font: inherit;
    font-size: .92rem;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input.upa-input::placeholder { color: var(--upa-light); opacity: 1; }
input.upa-input:-webkit-autofill,
input.upa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--upa-text);
    caret-color: var(--upa-text);
    box-shadow: 0 0 0 1000px var(--upa-card) inset;
    border-color: var(--upa-border);
}

.upa-input:focus { outline: none; border-color: var(--set-accent); box-shadow: var(--upa-focus); }
.upa-input.is-readonly { display: inline-flex; align-items: center; gap: .5rem; background: var(--upa-surface); color: var(--upa-muted); border-style: dashed; }
.upa-input.is-readonly i { font-size: .75rem; color: var(--upa-light); }
.upa-input-wrap { position: relative; display: block; }
.upa-prefix { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--upa-light); font-weight: 700; pointer-events: none; }
.upa-input.has-prefix { padding-left: 1.9rem; }
.upa-field-hint { color: var(--upa-light); font-size: .72rem; }
.upa-field .validation-message { color: var(--upa-critical); font-size: .74rem; }
.upa-brand { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; font-size: .7rem; font-weight: 800; }
.upa-brand.is-venmo { background: #3D95CE; }
.upa-brand.is-cashapp { background: #00C244; }

.upa-save { display: grid; gap: .8rem; justify-items: start; }

/* Lists and the timeline */
.upa-list { display: grid; gap: .65rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.upa-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; }
.upa-list li i { width: 18px; margin-top: .2rem; color: var(--set-icon); text-align: center; }
.upa-list li span { display: grid; }
.upa-list li small { color: var(--upa-muted); font-size: .74rem; }

.upa-timeline { position: relative; display: grid; gap: .8rem; margin: 0; padding: 0 0 0 1.4rem; list-style: none; }
.upa-timeline::before { content: ""; position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 2px; background: var(--upa-border); }
.upa-timeline li { position: relative; display: flex; }
.upa-timeline li span { display: grid; font-size: .84rem; }
.upa-timeline li small { color: var(--upa-muted); font-size: .74rem; }
.upa-tl-dot { position: absolute; left: -1.4rem; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--set-icon); border: 3px solid var(--upa-card); box-shadow: 0 0 0 1px var(--upa-border); }
.upa-timeline li.is-partner .upa-tl-dot { background: var(--upa-partner); }
.upa-timeline li.is-aqua .upa-tl-dot { background: var(--upa-aqua); }
.upa-timeline li.is-now .upa-tl-dot { background: var(--upa-positive); animation: upa-pulse 2.4s ease-in-out infinite; }
@keyframes upa-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--upa-positive) 25%, transparent); } }

.upa-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .95rem; border-radius: 14px; border: 1px solid var(--upa-border); font-size: .86rem; }
.upa-alert.is-success { border-left: 4px solid var(--upa-positive); background: color-mix(in srgb, var(--upa-positive) 10%, var(--upa-card)); }
.upa-alert.is-success i { color: var(--upa-positive); }
.upa-alert.is-error { border-left: 4px solid var(--upa-critical); background: color-mix(in srgb, var(--upa-critical) 10%, var(--upa-card)); }
.upa-alert.is-error i { color: var(--upa-critical); }

@media (max-width: 1199.98px) {
    .upa-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .upa-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .upa-hero { padding: 1.2rem 1rem 1rem; border-radius: 16px; }
    .upa-hero-main { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .upa-stack { --upa-main: 124px; --upa-small: 72px; }
    .upa-pills { justify-content: center; }
    .upa-complete { margin-left: auto; margin-right: auto; }
    .upa-upload-row { justify-content: center; }
    .upa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .upa-stat { padding: .65rem .7rem; }
    .upa-stat-value { font-size: 1.05rem; }
    .upa-fields { grid-template-columns: minmax(0, 1fr); }
    .upa-head-actions .upa-btn span { display: none; }
    .upa-save .upa-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .upa-ring, .upa-av--partner, .upa-stat, .upa-card, .upa-tl-dot, .upa-spin { animation: none !important; }
    .upa-btn, .upa-complete-bar span, .upa-input { transition: none !important; }
}

[data-a11y-reduce-motion="on"] .upa-ring, [data-a11y-reduce-motion="on"] .upa-av--partner, [data-a11y-reduce-motion="on"] .upa-tl-dot { animation: none !important; }