/* Pal Society account wizard: compact, task-focused surfaces. */
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#304637;background:#fffdf8;color-scheme:light;font-synthesis:none;--ink:#304637;--muted:#75816f;--line:#e8eadf;--paper:#fffdf8;--green:#55734d}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper)}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:var(--green);text-underline-offset:3px}button:focus-visible,a:focus-visible,summary:focus-visible,code:focus-visible{outline:2px solid #6f8a61;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}p{font-size:12px;line-height:1.65;margin:0 0 12px}h2{font-size:20px;line-height:1.3;letter-spacing:-.5px;margin:0 0 10px}
.account-nav{position:relative;display:flex;align-items:center;min-height:60px;padding:12px 112px 12px 20px;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:-.3px}.wordmark img{width:26px;height:26px;object-fit:contain}.account-nav .back,.panel-heading,#wizard-art,.welcome-mark,.welcome>h2,.welcome>p:not(#linked-name),#connect>.link-heading,#connect>.small,.why,.step-number,.step-body>h2,.step-body>p[data-i18n="accountUiStep1Help"],.step-body>p[data-i18n="accountUiStep3Help"],.dm-example{display:none}
.account-panel{padding:20px}.account-layout{display:block}.status{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:0 0 12px}.status:empty{display:none}.status.error{padding:11px 13px;border:1px solid #efdbcd;background:#fff4ec;color:#8c5142;border-radius:10px;text-align:left}
.wizard-trail{display:flex;align-items:center;gap:5px;margin:0 0 16px;height:18px}.wizard-trail span{width:17px;height:3px;border-radius:3px;background:#e3e8db;font-size:0;transition:background .2s}.wizard-trail span.active{background:#708765}.wizard-trail span.active:after{content:attr(data-step-label);position:absolute;right:20px;font-size:10px;line-height:18px;letter-spacing:.2px;color:var(--muted);transform:translateY(-7px)}
.steps{list-style:none;padding:0;margin:0}.step{margin:0;padding:0}.step-body{min-width:0}.step-body>p{font-size:12px;color:#65735e;margin:0 0 12px}.small{font-size:11px;line-height:1.6;color:var(--muted);margin:8px 0 12px}.small:empty{display:none}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid #dfe5d7;background:#f0f4e9;color:var(--green);border-radius:11px;padding:10px 14px;text-decoration:none;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;transition:background .16s,box-shadow .16s,transform .16s}button:hover,.button:hover{background:#e9efdf}button:active,.button:active{transform:translateY(1px)}.text-button{background:transparent;border-color:transparent;color:var(--muted);font-weight:400;text-decoration:underline}.text-button:hover{background:#f4f5ef}.danger{background:#995a49;border-color:#995a49;color:white}.danger:hover{background:#864d3f}
/* A single illustrated action per step. The faces stay uncropped. */
#google-sign-in,#link-pal,#start-link,#open-chat,#confirm,#open-resident{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;width:100%;min-height:138px;padding:24px 47% 24px 20px;border:1px solid #dfe6d3;border-radius:16px;background:#f0f2e2;color:#314b34;text-align:left;text-decoration:none;font-size:19px;font-weight:600;line-height:1.22;letter-spacing:-.55px;box-shadow:0 2px 5px #344f3710;transition:border-color .18s,box-shadow .18s,transform .18s}
#google-sign-in:before,#link-pal:before,#start-link:before,#open-chat:before{content:'';position:absolute;z-index:-1;inset:0;background:url('images/account-welcome-v1.png') right center/auto 100% no-repeat;mask-image:linear-gradient(to right,transparent 22%,#000 66%)}
.verified-pal-portrait{position:absolute;right:12px;top:6px;width:44%;height:calc(100% - 12px);object-fit:contain;pointer-events:none;z-index:-1}
#google-sign-in:after,#link-pal:after,#start-link:after,#open-chat:after,#confirm:after,#open-resident:after{content:'→';position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffffbd;border-radius:50%;background:#fffdf8ed;font:17px/1 Arial;color:#4d6946}
#google-sign-in:hover,#link-pal:hover,#start-link:hover,#open-chat:hover,#confirm:hover,#open-resident:hover{border-color:#aabd98;box-shadow:0 4px 12px #344f3719;transform:translateY(-1px)}
#google-sign-in:active,#link-pal:active,#start-link:active,#open-chat:active,#confirm:active,#open-resident:active{transform:translateY(0);box-shadow:none}
#google-sign-in{font-size:17px;gap:8px}.google-mark{font:700 19px Arial;color:#4285f4;flex-shrink:0}#open-chat{min-height:122px;padding-top:42px;padding-bottom:16px;font-size:17px}#open-chat:after{content:'↗'}.instagram-mark{position:absolute;left:20px;top:16px;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.instagram-mark .instagram-dot{fill:currentColor;stroke:none}
#challenge{margin-bottom:16px}.code-box{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:#f7f8f2;border:1px solid var(--line);border-radius:12px}.code-box code{flex:1;min-width:0;user-select:all;overflow-wrap:anywhere;color:#50664b;font:11px/1.7 ui-monospace,Consolas,monospace;letter-spacing:.1px}.code-box button{flex-shrink:0;padding:8px 12px;min-height:44px;background:var(--paper);border-color:#e2e7da;border-radius:8px;font-size:11px}.code-box button:hover{background:#edf2e5}#copy-status{margin:8px 2px 0;font-size:11px}#sent-next{width:100%;min-height:44px;margin-top:12px;border-color:transparent;background:transparent;color:#5d7353;font-size:12px;font-weight:500}#sent-next:hover{background:#f2f5ec}#check{width:100%;background:#f0f4e9}.confirmation{padding:0;border:0;background:none;text-align:center}.confirmation:before{content:'✓';display:grid;place-items:center;width:34px;height:34px;margin:0 auto 10px;background:#edf3e5;border:1px solid #dde8cf;border-radius:50%;color:#658354;font-size:16px}.confirmation p{font-size:16px;font-weight:600;overflow-wrap:anywhere;margin:0 0 16px}.confirmation #confirm{font-size:18px;min-height:120px}.confirmation #retry{margin-top:7px;font-size:11px}#linked-name{text-align:center;font-size:13px;margin-bottom:14px}.welcome>.button.secondary{display:none}
/* Secondary actions stay in a single keyboard-accessible menu. */
.utility-menu{position:absolute;right:58px;top:8px;z-index:10}.utility-menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font-size:22px;color:#7a8872;cursor:pointer}.utility-menu>summary::-webkit-details-marker{display:none}.utility-menu>summary:hover,.utility-menu[open]>summary{background:#f1f4eb}.utility-menu-panel{position:absolute;top:46px;right:-42px;width:min(296px,calc(100vw - 28px));max-height:calc(100dvh - 80px);overflow:auto;padding:8px 16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px #263e3420}.account-shell:has(.utility-menu[open]){min-height:520px}.utility-menu-panel summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:11px;color:#617456;cursor:pointer}.utility-menu-panel summary:after{content:'+';font-size:14px;color:#8b977f}.utility-menu-panel p{font-size:11px;line-height:1.7;color:#73816b}.utility-menu-panel .actions{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.utility-menu-panel .actions button{font-size:11px}#delete-confirm{padding:12px;background:#fcf4ed;border-radius:10px}#delete-confirm:before{display:none}#delete-confirm p{font-size:12px;font-weight:400;text-align:left}#google-identity{overflow-wrap:anywhere}.utility-menu-panel #new-code{font-size:11px}
@media(max-width:360px){.account-panel{padding:16px}.account-nav{padding-left:16px}.wordmark{font-size:11px;gap:6px}.wordmark img{width:24px;height:24px}.code-box{padding-left:9px;gap:5px}.code-box code{font-size:10px}.code-box button{padding-inline:9px}#google-sign-in,#link-pal,#start-link{min-height:126px;font-size:17px;padding-left:16px}#open-chat{padding-left:16px}.instagram-mark{left:16px}.wizard-trail span.active:after{right:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.wizard-trail{position:relative}.wizard-trail span.active:after{right:0;top:0;transform:none}

/* Provider assets are reproduced unchanged from their official packs. */
#google-sign-in{display:flex;align-items:center;justify-content:center;min-height:44px;width:198px;max-width:100%;padding:0;border:0;background:transparent;box-shadow:none;border-radius:24px;margin:0 auto;transform:none}#google-sign-in:before,#google-sign-in:after{display:none}#google-sign-in:hover{background:#f8fafd;box-shadow:0 1px 6px #1f1f1f14;transform:none}.google-signin-art{display:block;width:198px;height:44px;max-width:100%;object-fit:contain}#google-login{padding:0}.instagram-mark{width:24px;height:24px;object-fit:contain;stroke:none;fill:none}#start-link{min-height:44px;padding:10px 14px;justify-content:center;font-size:12px;letter-spacing:0;background:#f0f4e9}#start-link:before,#start-link:after{display:none}

/* Shared finish for sign-in, verification, linked state and account options. */
:root{--muted:#62725e;--line:#e4e9db}
body{background:radial-gradient(ellipse at top left,#f4f7eb 0,transparent 65%),var(--paper)}
.account-nav{min-height:64px;padding-left:22px;background:#fffdf8d9}
.wordmark{font-size:13px;gap:9px}.wordmark img{width:28px;height:28px}
.account-panel{padding:24px}
p,.step-body>p{font-size:14px;line-height:1.65}
h2{font-size:22px;line-height:1.25;letter-spacing:-.6px}
.status{font-size:13px;margin-bottom:16px}.status.error{border-radius:14px}
.small{font-size:12px;line-height:1.65}
.welcome>h2,.welcome>p:not(#linked-name){display:block}
.welcome{text-align:center}.welcome>p{color:var(--muted);max-width:32ch;margin:0 auto 22px}
#google-login{padding:4px 0 8px}
#google-login>h2{margin-bottom:10px}
button,.button{font-size:14px;border-radius:12px}
.wizard-trail{margin-bottom:20px;gap:6px}
.wizard-trail span{width:28px;height:4px}.wizard-trail span.active:after{font-size:11px}
.step-body>h2{display:block;font-size:20px;margin-bottom:12px}
#step-confirm:has(#pending:not([hidden]))>.step-body>h2{display:none}
#link-pal,#open-chat,#confirm,#open-resident{min-height:112px;border-radius:18px;font-size:18px;padding-left:18px;box-shadow:0 3px 10px #344f370b}
#open-chat{padding-top:44px;padding-bottom:18px}.instagram-mark{left:18px;top:14px}
#confirm,#open-resident{padding-right:20px;justify-content:center;text-align:center}
#confirm:has(.verified-pal-portrait),#open-resident:has(.verified-pal-portrait){padding-right:47%;justify-content:flex-start;text-align:left}
.code-box{padding:10px 10px 10px 14px;gap:10px;border-radius:14px;background:#f2f5ec}
.code-box code{font-size:13px;line-height:1.65;letter-spacing:.3px}.code-box button{font-size:12px}
#sent-next{font-size:14px;margin-top:10px}.confirmation p{font-size:18px}.confirmation #retry{font-size:13px}
#linked-name{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.utility-menu-panel{right:-42px;width:min(324px,calc(100vw - 32px));padding:8px 16px;border-radius:16px;box-shadow:0 16px 40px #263e3424}
.utility-menu-panel summary,.utility-menu-panel .actions button,.utility-menu-panel #new-code{font-size:13px}
.utility-menu-panel p{font-size:13px;line-height:1.65}
.utility-menu-panel>details,.utility-menu-panel footer{border-bottom:1px solid var(--line)}
.utility-menu-panel footer{border-bottom:0}
#delete-confirm{padding:14px;border:1px solid #edd9cd}#delete-confirm p{font-size:13px}#delete-confirm button{width:100%;margin-top:6px}
@media(max-width:360px){.account-panel{padding:20px 16px}.account-nav{padding-left:16px}.wordmark{font-size:12px}.code-box{padding:8px;gap:6px}.code-box code{font-size:12px}h2{font-size:21px}}
@media(max-height:500px){.account-panel{padding-block:16px}.account-shell:has(.utility-menu[open]){min-height:360px}}