/* bl-profile.css - "About you" (includes/account/profile.php, assets/js/bl-profile.js). The card, chips and buttons are
   onboarding's (bl-onboard.css, .ob); this adds the fields. A field that needs attention is said in the plans page's
   warm accent (gold ring and text, as .pl-need), never red, and never by colour alone (the words sit beside it). */
.pf-step{display:none}
html.pf-on .pf-step{display:block;margin:0 0 22px}
html.pf-on .ob-step{display:none}   /* "What are you studying?" comes next, once this is answered or put off */
.pf[data-pf="edit"]{background:none;box-shadow:none;padding:0;border-radius:0}
.pf-f{margin:0 0 16px;max-width:420px}
/* account.php gives every .ac label a block margin; these lay out themselves */
.ac .pf label{margin:0}
.ac .pf .pf-l{margin:0 0 8px}
.pf .pf-l{display:block;margin:0 0 8px;font:600 17px/1.3 var(--f-display);color:var(--ink)}
.pf .pf-l small{font:500 14px/1.3 var(--f-body);color:var(--ink-3);margin-inline-start:4px}
.pf .input,.pf .select{width:100%;min-height:48px;box-sizing:border-box;font-size:16px}
.pf-dobf{display:flex;flex-wrap:wrap;gap:12px}
.pf .pf-dl{display:flex;flex-direction:column;gap:6px;margin:0}
.pf .pf-dl > span{font-size:14px;font-weight:700;color:var(--ink-2);margin:0}
/* the date of birth: two native selects (owner, 20 Oct 2026), the site's select look at 48 px; side by side, each wide
   enough for its longest choice ("September", a four-digit year) beside the chevron, and on a narrow phone where
   both do not fit the year goes under the month rather than either being cut */
.pf .pf-dl-month{flex:1 1 154px;min-width:154px;max-width:240px}
.pf .pf-dl-year{flex:0 1 120px;min-width:112px;max-width:160px}
.pf .pf-dl .select{width:100%;min-width:0;font-variant-numeric:tabular-nums;text-overflow:ellipsis}
.pf .select[aria-invalid="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background-color:var(--gold-tint)}
.pf-note{margin:10px 0 0;color:var(--ink-3);font-size:14.5px}
.pf-need{margin:8px 0 0;color:var(--gold-ink);font-size:14.5px;font-weight:700;line-height:1.4}
.pf-need[hidden]{display:none}
.pf .input[aria-invalid="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background:var(--gold-tint)}
.pf .input[aria-invalid="true"]:focus{outline:2px solid var(--gold-ink);outline-offset:2px}
.pf-yg[hidden],.pf-dob[hidden],.pf-bornrow[hidden]{display:none}
.pf-born{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;color:var(--ink);font-weight:600}
.pf-chg{min-height:44px;padding:0;border:0;background:none;color:var(--study-ink);font:700 15px/1 var(--f-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.pf-chg:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.pf .ob-done[aria-busy="true"]{cursor:progress}
/* under 13 at sign-up: the account was not kept; only the message and the way to the tools remain on the page */
html.pf-closed .pf-step{display:block;margin:0 0 22px}
html.pf-closed .acd-nav,html.pf-closed .acd-main > :not(.pf-step){display:none}
/* straight after sign-up (account.php html.pf-first; coordinator, 14 Oct): About you alone on the page, never the
   dashboard and its cards; the first lesson comes next */
html.pf-first .acd-nav,html.pf-first .acs-nav,html.pf-first .acd-main > :not(.pf-step){display:none}
html.pf-first.pf-on #accLoggedIn .pf-step{display:block}
html.pf-first #accLoggedIn:not([hidden]){display:block;max-width:680px}   /* one column: no nav beside it */
html.pf-first.ob-on:not(.pf-on) #accLoggedIn .ob-step{display:block}   /* then What are you studying?, alone (journey C #6) */
/* signed in with no date of birth yet (account/profile.php 'need', bl-profile.js; journey C #5, 16 Oct 2026): the account
   is not usable until the age is known, so About you is all the account page shows, as straight after sign-up, under
   the account's own header (who is signed in, Sign out, the Settings tab: deleting the account stays possible) */
html.pf-gate.pf-on .acd-nav,html.pf-gate.pf-on .acs-nav,html.pf-gate.pf-on .acd-main > :not(.pf-step):not(.acd-head):not(.acd-pages):not(#plan){display:none}html.pf-gate.pf-on #accLoggedIn .pf-step{display:block}
html.pf-gate.pf-on #accLoggedIn:not([hidden]){display:block;max-width:680px}
/* the plan, and with it Manage or cancel, stays in reach while About you waits (mobile UX sweep S-13; layout only, the form is unchanged) */
html.pf-gate.pf-on .acd-main > #plan{display:block;margin-top:22px}
.pf-next{margin:0 0 22px}.pf-next .b{min-height:48px}   /* Start your first lesson, after About you on the account page (journey C #4) */
.pf-u13{margin:0;font-size:17px;line-height:1.5;color:var(--ink);max-width:60ch;outline:none}
.pf-u13-go{margin:18px 0 0}
@media (max-width:600px){.pf-f{max-width:none}}