/* The profile uses the same living coast and tactile material. Sign-in is
   immediately visible; longer member records and settings stay in sheets. */
body.profile-playful{
  --app-paper:#fff9e9;--app-surface:#fffdf5;--app-ground:transparent;
  --app-ink:#214b40;--app-muted:#576d61;--app-rim:#ddd5bf;--app-sea:#2f6f4e;--app-deep:#205443;--app-soft:#e4eed9;--app-edge:#c9bea2;
  --app-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --app-jp:var(--app-font);--profile-heading:'Baloo 2','Hiragino Maru Gothic ProN',var(--app-font);
  --profile-safe-top:env(safe-area-inset-top,0px);--profile-safe-bottom:env(safe-area-inset-bottom,0px);
  --profile-safe-left:env(safe-area-inset-left,0px);--profile-safe-right:env(safe-area-inset-right,0px);
  position:relative;height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;
  background:var(--sea-fallback-4,#1b6e96);color:var(--app-ink);font-family:var(--app-font);
}
body.profile-playful.dw-has-nav{padding-bottom:calc(94px + var(--profile-safe-bottom))}
body.profile-playful.profile-sheet-open{overflow:hidden}
body.profile-playful[data-app-page=account]>header{
  position:relative;z-index:1;max-width:500px;margin:0 auto;padding:calc(12px + var(--profile-safe-top)) 20px 9px;
  background:transparent;border:0;text-align:left;color:#fff9e9;
}
body.profile-playful[data-app-page=account]>header a.back.profile-brand{
  position:static;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--sky-ink,#fff9e9);text-shadow:var(--sky-shadow);font:800 19px/1.2 var(--profile-heading);letter-spacing:.1em;
}
body.profile-playful .profile-brand img{display:block;width:38px;height:38px;object-fit:contain;border:2px solid #fff9e9;border-radius:15px;background:#fff9e9;box-shadow:0 3px 0 #b9a987}
body.profile-playful[data-app-page=account] header h1{margin:13px 0 0;padding:0;font:700 28px/1.25 var(--profile-heading);letter-spacing:-.03em;color:#fff9e9;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899}
body.profile-playful #drewLangToggle{position:absolute;top:calc(14px + var(--profile-safe-top));right:max(20px,calc((100vw - 460px)/2));z-index:12;min-height:44px;padding:8px 11px;border:1px solid var(--app-rim);border-radius:16px;background:linear-gradient(#fffdf5,#f5e9cf);color:var(--app-deep);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);font:700 13px/1.2 var(--app-font)}
body.profile-playful[data-app-page=account] main{position:relative;z-index:1;width:100%;max-width:500px;margin:0 auto;padding:4px max(20px,var(--profile-safe-right)) 0 max(20px,var(--profile-safe-left))}
body.profile-playful #card{width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-width:0}
body.profile-playful .profile-overview{display:flex;flex-direction:column;gap:15px}
body.profile-playful #card .profile-overview .me{display:flex;align-items:center;gap:13px;min-height:86px;padding:15px 17px;border:1px solid #e7d9b9;border-radius:24px;background:linear-gradient(#fffdf5,#f8eed6);box-shadow:inset 0 2px 0 #fff,0 5px 0 #bfb18e,0 10px 20px #123e4930;text-align:left}
body.profile-playful #card .profile-overview .me .avatar{flex:none;width:52px;height:52px;margin:0;border-radius:18px;background:linear-gradient(#b1e4b6,#78c897);border:2px solid #dff3ce;color:#214b40;font:700 27px/1 var(--profile-heading);box-shadow:0 3px 0 #59956d}
body.profile-playful #card .profile-overview .nm{min-width:0;font:700 20px/1.35 var(--profile-heading);overflow-wrap:anywhere;text-align:left}
body.profile-playful .profile-object{display:block;width:44px;height:44px;object-fit:contain;flex:none;pointer-events:none}
body.profile-playful .profile-guest .profile-object{width:54px;height:54px}
body.profile-playful .profile-summary-note{font:500 11px/1.6 var(--app-font);color:var(--app-muted);margin-top:4px}
body.profile-playful .profile-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.profile-playful .profile-quick{--sg-height:88px;--sg-radius:22px;--sg-depth:5px;display:flex;flex-direction:column;gap:4px;min-width:0;padding:9px 8px;font:700 14px/1.4 var(--profile-heading)}
body.profile-playful .profile-quick .profile-object{width:37px;height:37px}
body.profile-playful .profile-quick:first-child{--sg-face-top:#cfbffc;--sg-face-bottom:#b79dec;--sg-rim:#eee3ff;--sg-base:#8770b1;--sg-ink:#382650}
body.profile-playful .profile-quick:last-child{--sg-face-top:#ffd5b5;--sg-face-bottom:#f5b58c;--sg-rim:#fff0db;--sg-base:#bd8966;--sg-ink:#563621}
body.profile-playful .profile-row{--sg-height:65px;--sg-radius:22px;--sg-depth:5px;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;padding:10px 14px;text-align:left}
body.profile-playful .profile-row-copy{flex:1;min-width:0}
body.profile-playful .profile-row-copy strong{display:block;font:700 17px/1.35 var(--profile-heading);color:var(--sg-ink)}
body.profile-playful .profile-row-copy small{display:block;margin-top:3px;font:500 10px/1.5 var(--app-font);color:var(--sg-ink)}
body.profile-playful .profile-row-arrow{font:700 26px/1 var(--profile-heading);flex:none}
body.profile-playful .profile-mint{--sg-face-top:#94e5bc;--sg-face-bottom:#5dcea0;--sg-rim:#d4ffde;--sg-base:#369574;--sg-ink:#174535}
body.profile-playful .profile-blue{--sg-face-top:#a0dbf5;--sg-face-bottom:#6abfe6;--sg-rim:#dff8ff;--sg-base:#408bb1;--sg-ink:#204557}
body.profile-playful .profile-return{--sg-height:48px;--sg-radius:18px;--sg-depth:4px;font:700 15px/1.4 var(--app-font)}
body.profile-playful>footer{position:relative;z-index:1;max-width:500px;margin:12px auto 0;padding:0 20px;color:#fff9e9;font:500 10px/1.5 var(--app-font);text-shadow:0 1px 5px #062838b3}
body.profile-playful .profile-info-button{min-width:88px;min-height:44px;padding:8px 12px;border:0;border-radius:12px;background:none;color:#fff9e9;text-shadow:0 1px 5px #062838b3;font:700 12px/1.4 var(--app-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.profile-playful .profile-info-button:focus-visible{outline-color:#fff9e9;outline-offset:2px}
body.profile-playful .profile-info-links{display:flex;flex-direction:column;gap:15px}
body.profile-playful .profile-info-link{--sg-height:48px;--sg-radius:17px;--sg-depth:4px;--sg-press:3px;display:flex;justify-content:flex-start;min-height:48px;padding:11px 15px;font:700 15px/1.5 var(--app-font)}

/* Native dialog keeps keyboard focus inside the open sheet. The independently
   scrolling body preserves long legal text, large text and software keyboards. */
body.profile-playful .profile-sheet{position:fixed;inset:auto 0 0;width:min(500px,100%);max-width:100%;max-height:calc(100dvh - var(--profile-safe-top) - 12px);margin:0 auto;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--app-paper);color:var(--app-ink);box-shadow:0 -10px 50px #062a3b4d;overflow:hidden}
body.profile-playful .profile-sheet::backdrop{background:#082d426e;backdrop-filter:blur(5px)}
body.profile-playful .profile-sheet[open]{display:flex;flex-direction:column}
body.profile-playful .profile-sheet-shell{display:flex;flex-direction:column;min-height:0;max-height:inherit;width:100%}
body.profile-playful .profile-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:16px 20px 13px;border-bottom:1px solid #e6dcc5;box-shadow:inset 0 2px 0 #fff}
body.profile-playful .profile-sheet-head h2{font:700 20px/1.3 var(--profile-heading);margin:0;color:var(--app-ink)}
body.profile-playful .profile-sheet .profile-sheet-close{--sg-depth:3px;--sg-press:2px;font-size:28px;line-height:1;padding:0;min-height:44px;min-width:44px;flex:none}
body.profile-playful .profile-sheet-body{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:16px 20px calc(25px + var(--profile-safe-bottom));-webkit-overflow-scrolling:touch}
body.profile-playful #card .actions{margin:0;padding:0;border:0}
body.profile-playful .profile-email{padding:0 0 14px;font:500 13px/1.6 var(--app-font);color:var(--app-muted);overflow-wrap:anywhere}
body.profile-playful .profile-sheet .btn.sg-button{--sg-height:48px;--sg-radius:17px;--sg-depth:4px;--sg-press:3px;display:flex;width:100%;margin:14px 0 5px;padding:11px 14px;font:700 15px/1.5 var(--app-font)}
body.profile-playful .profile-sheet .tabs{display:flex;gap:12px;margin:0 0 18px!important}
body.profile-playful .profile-sheet .tab.sg-button{--sg-height:44px;--sg-radius:15px;--sg-depth:3px;--sg-press:2px;flex:1;min-width:0;padding:9px 6px;font:700 13px/1.4 var(--app-font);text-align:center}
body.profile-playful .profile-sheet .tab.on{--sg-face-top:#b3e7bb;--sg-face-bottom:#8cd5a2;--sg-base:#37806d;--sg-rim:#78bfa0;--sg-ink:#174f40}
body.profile-playful .profile-sheet :is(input,select,textarea){font-size:16px;min-height:44px;background:#fffdf7;border-color:#c5ceb7;border-radius:12px;color:var(--app-ink)}
body.profile-playful .profile-sheet input[type=checkbox]{min-height:20px}
body.profile-playful .profile-sheet label{font:700 13px/1.5 var(--app-font);color:var(--app-muted)}
body.profile-playful .profile-sheet :is(.forgot a,.dangerlink,.empty a){display:flex;align-items:center;justify-content:center;min-height:44px}
body.profile-playful .profile-sheet :is(.apple-btn,.line-btn,.danger){min-height:48px;border-radius:15px;font:700 15px/1.5 var(--app-font)}
body.profile-playful .profile-sheet .consent{font-size:12px;line-height:1.7}
body.profile-playful .profile-sheet .stars{color:#9b651c;margin-top:0;font-size:38px}
body.profile-playful .profile-sheet .lessonlist{max-height:none;overflow:visible;background:#fffdf6;border-color:#ded5bf}
body.profile-playful .profile-sheet #statBody a{min-height:44px;align-content:center}
body.profile-playful .profile-sheet :is(.del-h,.forgot-title){font-family:var(--profile-heading)}
body.profile-playful .profile-sheet .msg:empty{min-height:0;margin-top:5px}

/* The same illustrated cream dock as the approved homepage. */
body.profile-playful .dw-nav{position:fixed;left:8px;right:8px;bottom:0;top:auto;width:auto;transform:none;z-index:30;display:flex;flex-direction:row;gap:2px;padding:5px max(4px,var(--profile-safe-right)) calc(8px + var(--profile-safe-bottom)) max(4px,var(--profile-safe-left));border:1px solid var(--app-rim);border-bottom:0;border-radius:25px 25px 0 0;background:linear-gradient(#fffdf5,#f9f1df);box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f20;backdrop-filter:none}
body.profile-playful .dw-nav a{flex:1 1 0%;min-width:44px;min-height:64px;padding:4px 0 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:17px;color:var(--app-muted);opacity:1;font:500 11px/1.4 var(--app-font)}
body.profile-playful .dw-nav a:last-child{flex-grow:1.25}
body.profile-playful .dw-nav a.on{background:var(--app-soft);color:var(--app-deep);font-weight:800;box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1}
body.profile-playful .dw-nav .dw-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none}
body.profile-playful .dw-nav-object{width:36px;height:36px;display:block;object-fit:contain}
body.profile-playful .dw-nav-object+svg{display:none}
body.profile-playful .dw-nav a [data-jp]{font:inherit;white-space:normal;letter-spacing:normal}
body.profile-playful .dw-nav .dw-badge{top:0;right:-6px;background:var(--app-sea);border:1px solid var(--app-paper)}
body.profile-playful .profile-overview .sg-button:focus-visible{outline-color:#fff9e9;outline-offset:5px}
body.profile-playful .dw-nav a:focus-visible,body.profile-playful #drewLangToggle:focus-visible{outline-color:var(--app-deep)}
@media(max-height:720px) and (max-width:879px){
  body.profile-playful[data-app-page=account]>header{padding-top:calc(9px + var(--profile-safe-top));padding-bottom:6px}
  body.profile-playful[data-app-page=account] header h1{font-size:25px;margin-top:9px}
  body.profile-playful .profile-overview{gap:13px}
  body.profile-playful #card .profile-overview .me{min-height:77px;padding:12px 15px}
  body.profile-playful .profile-quick{--sg-height:80px;padding:7px 8px;font-size:13px}
  body.profile-playful .profile-quick .profile-object{width:33px;height:33px}
  body.profile-playful .profile-row{--sg-height:61px;padding:8px 12px}
  body.profile-playful .profile-row .profile-object{width:39px;height:39px}
  body.profile-playful .profile-row-copy strong{font-size:16px}
  body.profile-playful>footer{margin-top:10px}
}
@media(min-width:880px){
  body.profile-playful.dw-has-nav{padding-left:228px;padding-bottom:24px}
  body.profile-playful[data-app-page=account]>header{padding-top:24px}
  body.profile-playful[data-app-page=account] header h1{margin-top:24px;font-size:32px}
  body.profile-playful[data-app-page=account] main{padding-top:15px}
  body.profile-playful #drewLangToggle{top:26px;right:max(24px,calc((100vw - 228px - 460px)/2))}
  body.profile-playful .dw-nav{left:18px;right:auto;top:20px;bottom:20px;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border:1px solid var(--app-rim);border-radius:27px;box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--app-edge),0 12px 30px #163c4d20}
  body.profile-playful .dw-nav a{flex:none;flex-direction:row;justify-content:flex-start;gap:10px;min-height:56px;padding:8px 9px;font-size:14px;text-align:left}
  body.profile-playful .dw-nav a:last-child{flex-grow:0}
  body.profile-playful .profile-sheet{inset:0;width:460px;max-height:calc(100dvh - 48px);margin:auto;border-radius:28px;height:max-content}
}
@media(prefers-reduced-motion:reduce){body.profile-playful .profile-object{animation:none;transition:none}}

/* Guests land on the original sign-in controls immediately. A compact cream
   card keeps all login methods visible without a second screen or opener. */
body.profile-playful #card .profile-auth{display:block;padding:18px;border:1px solid #e7d9b9;border-radius:25px;background:linear-gradient(#fffdf5,#faf0d9);box-shadow:inset 0 2px 0 #fff,0 5px 0 #bfb18e,0 10px 20px #123e4930}
body.profile-playful .profile-auth .tabs{display:flex;gap:10px;margin:10px 0 7px!important}
body.profile-playful .profile-auth .tab.sg-button{--sg-height:44px;--sg-radius:15px;--sg-depth:3px;--sg-press:2px;flex:1;min-width:0;padding:9px 5px;font:700 13px/1.4 var(--app-font);text-align:center}
body.profile-playful .profile-auth .tab.on{--sg-face-top:#a0dbf5;--sg-face-bottom:#6abfe6;--sg-base:#408bb1;--sg-rim:#dff8ff;--sg-ink:#204557}
body.profile-playful .profile-auth :is(input,select,textarea){min-height:44px;padding:9px 11px;font:400 16px/1.25 var(--app-font);background:#fffdf7;border:1px solid #c5ceb7;border-radius:12px;color:var(--app-ink)}
body.profile-playful .profile-auth label{margin:9px 0 3px;font:700 12px/1.4 var(--app-font);color:var(--app-muted)}
body.profile-playful .profile-auth .btn.sg-button{--sg-height:46px;--sg-radius:16px;--sg-depth:4px;--sg-press:3px;display:flex;width:100%;min-height:46px;margin:12px 0 4px;padding:10px 13px;font:800 15px/1.4 var(--app-font)}
body.profile-playful .profile-auth :is(.apple-btn,.line-btn){min-height:44px;border-radius:13px;margin-top:7px;padding:10px 12px;font:700 14px/1.4 var(--app-font)}
body.profile-playful .profile-auth #appleSlot:empty{display:none}
body.profile-playful .profile-auth .or-div{margin:9px 0 0!important;font-size:11px!important}
body.profile-playful .profile-auth .forgot{margin:5px 0 0;font:600 12px/1.4 var(--app-font)}
body.profile-playful .profile-auth .forgot a{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--app-deep)}
body.profile-playful .profile-auth .msg{margin-top:10px;font:600 12px/1.5 var(--app-font)}
body.profile-playful .profile-auth .msg:empty{margin:0;min-height:0}
body.profile-playful .profile-auth .consent{margin-top:12px;font:500 11px/1.6 var(--app-font)}
body.profile-playful .profile-auth .forgot-title{margin:0 0 10px;color:var(--app-ink);font:800 20px/1.4 var(--profile-heading)}
body.profile-playful .profile-auth .forgot-text{color:var(--app-muted);font:500 13px/1.6 var(--app-font)}
body.profile-playful #card .profile-auth :focus-visible{outline:3px solid var(--app-deep);outline-offset:3px}
@media(max-width:600px) and (max-height:720px){
  body.profile-playful.dw-has-nav{padding-bottom:calc(78px + var(--profile-safe-bottom))}
  body.profile-playful[data-app-page=account] header h1{margin-top:4px}
  body.profile-playful #card .profile-auth{padding:8px 14px;border-radius:23px}
  body.profile-playful .profile-auth .tabs{margin:6px 0 5px!important}
  body.profile-playful .profile-auth label{margin:4px 0 2px}
  body.profile-playful .profile-auth .btn.sg-button{min-height:44px;--sg-height:44px;margin-top:9px;padding:9px 12px}
  body.profile-playful .profile-auth :is(.apple-btn,.line-btn){margin-top:5px}
  body.profile-playful .profile-auth .or-div{margin-top:4px!important}
  body.profile-playful .profile-auth .forgot{margin-top:1px}
  body.profile-playful .dw-nav a{min-height:58px}
  body.profile-playful>footer{margin-top:5px;padding-top:0;padding-bottom:0}
}