/* CareNotes signed-in pages (/account, /profile), layered on sample3.css */

:root { --mb: #2563eb; --mb-deep: #1e40af; --mb-soft: #dbeafe; --mb-green: #38cc75; }

/* ---------------- HERO BAND ---------------- */
.mb-hero {
    margin-top: -76px; padding: 140px 22px 120px; text-align: center; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #eef3ff 55%, #dbe7ff 100%);
    color: #1d1d1f;
}
.mb-hero .eyebrow { color: var(--mb-deep); }
.mb-hero h1 {
    margin: 10px auto 0; max-width: 800px;
    font-size: clamp(34px, 4.6vw, 58px); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; text-wrap: balance;
}
.mb-hero .lede {
    margin: 14px auto 0; max-width: 560px; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.4;
    color: #4b5a78; letter-spacing: -.01em; text-wrap: balance;
}

/* ---------------- CONTENT (overlaps the hero) ---------------- */
.mb-wrap { position: relative; z-index: 2; width: min(var(--mb-max, 640px), 100%); margin: -64px auto 0; padding: 0 22px 90px; }
.mb-panel {
    background: #fff; border-radius: 24px; padding: 30px 30px 28px;
    box-shadow: 0 40px 80px -40px rgba(30, 60, 140, .35), 0 0 0 1px rgba(0, 0, 0, .05);
}
.mb-panel + .mb-panel, .mb-stack > * + * { margin-top: 16px; }
.mb-center { text-align: center; }
.mb-panel h2 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.mb-panel h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mb-panel .sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #6e6e73; }
.mb-panel .sub a, .mb-foot a { color: var(--mb); font-weight: 600; }
.mb-panel .sub a:hover, .mb-foot a:hover { text-decoration: underline; }

.mb-spinner { font-size: 26px; color: var(--mb); }
#state-loading p { margin-top: 12px; color: #6e6e73; font-size: 15px; }

/* Buttons that the page (and its scripts) render */
.mb button { font: inherit; cursor: pointer; }
.mb .btn-dark, .mb .btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 13px 20px; border-radius: 980px; border: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    background: #1d1d1f; color: #fff; transition: background .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.mb .btn-dark:hover, .mb .btn-google:hover { background: var(--mb); box-shadow: 0 12px 26px -12px rgba(37, 99, 235, .65); }
.mb .btn-dark:disabled { opacity: .6; cursor: default; box-shadow: none; }
.mb .btn-google i { font-size: 16px; }
.mb-foot { margin-top: 22px; text-align: center; font-size: 13px; line-height: 1.5; color: #86868b; }
.mb-signout { display: inline-block; margin-top: 10px; font-size: 13.5px; color: #86868b; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }
.mb-signout:hover { color: #1d1d1f; }

/* Account: plan header + status pill */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.plan-head .k { font-size: 13px; color: #86868b; }
.plan-head .v { margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; word-break: break-all; }
#plan-body { margin-top: 20px; font-size: 16px; line-height: 1.55; color: #424245; }
#plan-body > * + * { margin-top: 12px; }
#plan-body strong { color: #1d1d1f; }
#plan-actions { margin-top: 24px; }
#plan-actions > * + * { margin-top: 12px; }
#plan-actions a.btn-dark { text-decoration: none; }
.premium-wordmark {
    display: block; height: 14px; aspect-ratio: 1583 / 130;
    background: linear-gradient(90deg, #2663eb 0%, #2663eb 45%, #38cc75 100%);
    -webkit-mask: url(/img/premium_text.png?v=2) no-repeat center / contain; mask: url(/img/premium_text.png?v=2) no-repeat center / contain;
}

/* Quick links under the panel */
.mb-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.mb-link {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; color: inherit;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mb-link:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -28px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .06); }
.mb-link .ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--mb-soft); color: var(--mb-deep); font-size: 14px; }
.mb-link .txt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mb-link .txt span { display: block; margin-top: 1px; font-size: 12.5px; color: #6e6e73; }

/* ---------------- PROFILE: identity card + form ---------------- */
.pf-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.pf-aside { position: sticky; top: 96px; }
.pf-aside .mb-panel { text-align: center; }
.avatar-lg {
    width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; color: #111; font-weight: 800; font-size: 38px; letter-spacing: .01em; box-sizing: border-box;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .28); border: 7px solid var(--mb);
}
#pv-name { margin-top: 16px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; }
#pv-signature { margin-top: 4px; font-size: 14px; font-style: italic; color: #6e6e73; overflow-wrap: anywhere; min-height: 1.4em; }
#pv-nickname { align-items: center; justify-content: center; gap: 6px; margin-top: 12px; border-radius: 980px; background: #f5f5f7; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #424245; }
#pv-nickname i { color: #86868b; }
.pv-tags { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pv-tag { border: 1px solid rgba(0, 0, 0, .12); border-radius: 980px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: #6e6e73; }
.pf-aside .mb-link { margin-top: 12px; }
.pf-aside .mb-link .txt { flex: 1; }
.pf-aside .mb-link .chev { color: rgba(0, 0, 0, .25); font-size: 13px; }
.pf-aside .mb-signout-wrap { text-align: center; margin-top: 4px; }

.pf-section .sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--mb-soft); color: var(--mb-deep); display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
.pf-fields > * + * { margin-top: 18px; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lbl { display: block; font-weight: 600; font-size: 14px; color: #1d1d1f; margin-bottom: 6px; }
.opt { color: #86868b; font-weight: 400; }
.hint { font-size: 12.5px; color: #86868b; margin-top: 6px; line-height: 1.4; }
.fld {
    width: 100%; border: 1px solid rgba(0, 0, 0, .14); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px;
    background: #fff; color: #1d1d1f; outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
select.fld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.fld:focus { border-color: var(--mb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.fld::placeholder { color: #a1a1a6; }
.fld.mt { margin-top: 10px; }
.seg { display: flex; background: #f0f0f2; border-radius: 12px; padding: 4px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: #6e6e73; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.seg button.on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.seg button:disabled { cursor: default; }
#missing { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 14px; }
.pf-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.pf-save .btn-dark { width: auto; padding: 13px 34px; }
.pf-save span { font-size: 13.5px; color: #86868b; }

/* State transitions (ids/classes are used by the page script) */
@keyframes cnFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cnPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.fade-in { animation: cnFadeUp .38s cubic-bezier(.22, 1, .36, 1) both; }
.fade-in .avatar-lg { animation: cnPop .5s .06s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) { .fade-in, .fade-in .avatar-lg { animation: none; } }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1068px) {
    .pf-grid { grid-template-columns: 280px 1fr; }
}
@media (max-width: 734px) {
    .mb-hero { padding: 120px 22px 100px; }
    .mb-wrap { margin-top: -56px; padding-bottom: 70px; }
    .mb-panel { padding: 24px 20px; border-radius: 20px; }
    .mb-links { grid-template-columns: 1fr; }
    .pf-grid { grid-template-columns: 1fr; }
    .pf-aside { position: static; }
    .pf-row { grid-template-columns: 1fr; }
}