@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#34343e;background:#faf9f6;--accent:#8876dc}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #e6e3ed;border-radius:9px;background:white;color:inherit;padding:9px 13px}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #baa8fa;outline-offset:2px}.primary{background:var(--accent);color:white;border:0;font-weight:600;padding:13px 20px}.textbutton{border:0;background:none;color:#77717f}.logo{font:800 29px Manrope,sans-serif;letter-spacing:-1.5px;color:#6657a2}.tagline{font-size:12px;color:#96909f;margin:8px 0 35px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#8b849a}h1,h2{font-family:Manrope,sans-serif}h1{font-size:35px;letter-spacing:-1.4px;margin:12px 0}p{color:#8b8592;line-height:1.7}#app{display:flex;min-height:100vh}#app[hidden], [hidden]{display:none!important}aside{width:250px;flex-shrink:0;background:#fff;border-right:1px solid #eeeaf2;padding:34px 25px;display:flex;flex-direction:column}aside>.primary{width:100%;margin-bottom:35px}.sectionhead{font-size:10px;letter-spacing:1.6px;display:flex;align-items:center;justify-content:space-between;color:#97909e;margin-bottom:15px}.sectionhead button{border:0;padding:4px}.calrow{display:flex;align-items:center;gap:7px;margin-bottom:10px}.calrow label{display:flex;align-items:center;gap:8px;flex:1;font-size:13px}.calrow input[type=checkbox]{accent-color:var(--c);width:16px;height:16px}.calrow input[type=color]{width:23px;height:23px;padding:0;border:0;background:none;cursor:pointer}.calrow button{font-size:12px;border:0;padding:4px}.sidebarbottom{margin-top:auto;padding-top:55px}.sidebarbottom p,.fine{font-size:11px;line-height:1.7;color:#97909e}.sidebarbottom span{display:block;font-weight:600;font-size:13px;margin-top:24px}main{padding:40px 38px;width:100%;min-width:0}header{display:flex;justify-content:space-between;align-items:center}header p{margin-top:8px;font-size:13px}#mobileadd{display:none}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:35px 0 22px;gap:10px}.monthnav{display:flex;align-items:center;gap:8px}.monthnav h2{font-size:22px;margin:0 16px 0 0;letter-spacing:-.6px}.monthnav button{padding:6px 10px;font-size:12px}.segmented{display:flex;background:#eeecf2;border-radius:9px;padding:4px}.segmented button{border:0;background:none;padding:7px 15px;font-size:12px}.segmented .active{background:white;box-shadow:0 2px 5px #2923350b}#calendar{background:white;border:1px solid #e8e5ee;border-radius:14px;overflow:hidden}.weekdays,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekdays div{padding:14px;text-align:center;font-size:10px;letter-spacing:1.2px;color:#95909f;font-weight:600;border-bottom:1px solid #eeeaf2}.day{min-height:120px;border-right:1px solid #eeeaf2;border-bottom:1px solid #eeeaf2;padding:10px 7px;cursor:pointer}.day:nth-child(7n){border-right:0}.day:hover{background:#faf9fe}.day.other{background:#fbfafc;color:#c4bfcc}.daynumber{display:inline-flex;font-size:12px;align-items:center;justify-content:center;width:27px;height:27px;margin-bottom:6px}.daynumber.current{background:#8876dc;color:white;border-radius:50%}.event{display:block;width:100%;border:0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 15%,white);padding:6px;border-radius:5px;text-align:left;margin:3px 0;color:#48424f;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event time{font-size:9px;display:block;opacity:.7;margin-top:3px}.agenda{padding:24px}.agendaday{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid #eeeaf2}.agendaday>strong{min-width:110px;font-size:13px}.agendaday>div{flex:1}.empty{text-align:center;padding:65px 20px;color:#8b8592}footer{display:flex;justify-content:space-between;padding-top:20px;color:#a29aa9;font-size:11px}dialog{border:1px solid #eeeaf2;border-radius:20px;padding:28px;max-width:520px;width:calc(100% - 32px);color:#34343e;box-shadow:0 25px 100px #25203933}dialog::backdrop{background:#24203466;backdrop-filter:blur(3px)}.dialogheading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialogheading h2{margin:0;font-size:23px}.dialogheading button{border:0;font-size:22px}label{display:block;font-size:12px;font-weight:600;margin-bottom:17px}input:not([type=checkbox]):not([type=color]),select,textarea{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #e4dfeb;border-radius:8px;background:#fdfcfe;color:#34343e}input[type=color]{display:block;margin-top:10px}textarea{min-height:80px;resize:vertical}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.actions{display:flex;justify-content:flex-end;gap:10px}.danger{color:#b74c62}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#34313e;color:white;border-radius:10px;padding:13px 22px;z-index:100;display:none;max-width:90vw;font-size:13px}#auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.welcome{background:#eee9f8;padding:70px;display:flex;flex-direction:column;justify-content:center}.welcome h1{font-size:64px;line-height:1.14;margin-top:60px}.welcome p{color:#8d7ca4}.preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.preview span{padding:14px;background:#faf3dd;border-radius:12px;font-size:12px}.preview span:nth-child(2){background:#ddede3}.preview span:nth-child(3){background:#f2dfeb}#authform{margin:auto;max-width:380px;padding:30px;width:100%}#authform h2{font-size:26px;letter-spacing:-1px}#authform p{font-size:13px}#authform button{width:100%;margin-bottom:12px}@media(min-width:1400px){main{padding:50px 65px}.day{min-height:150px}}@media(max-width:900px){aside{width:200px;padding:25px 16px}main{padding:30px 20px}.day{min-height:100px}.monthnav h2{font-size:17px}.welcome{padding:40px}.welcome h1{font-size:48px}}@media(max-width:650px){#app{display:block}aside{width:100%;padding:18px;border-right:0;border-bottom:1px solid #eeeaf2}.logo{font-size:24px}.tagline,aside>.primary,.sidebarbottom p{display:none}.sectionhead{margin-top:20px}.sidebarbottom{padding-top:10px;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sidebarbottom span{margin:0}.calrow{display:inline-flex;margin-right:15px}.calrow label{font-size:12px}.sidebarbottom button{font-size:11px}main{padding:22px 12px}header h1{font-size:26px}header p{font-size:11px}#mobileadd{display:block;padding:10px}.toolbar{margin-top:22px;flex-wrap:wrap}.monthnav h2{font-size:18px}.day{padding:4px;min-height:95px}.weekdays div{padding:12px 0;font-size:9px}.event{font-size:9px;padding:4px}.event time{font-size:8px}.daynumber{font-size:10px;width:22px;height:22px}footer{font-size:9px;gap:15px}#auth{display:block}.welcome{padding:30px}.welcome h1{font-size:40px;margin-top:25px}.welcome p,.preview{display:none}#authform{padding-top:35px}.twocol{grid-template-columns:1fr}.agendaday>strong{min-width:70px}.agendaday{gap:10px}}
.extras{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.extras button{font-size:12px}.calm-toggle{display:flex;align-items:center;gap:8px;margin:0;padding:8px;font-weight:400}.wellbeing-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}#personalpanel,#chatpanel,#focuspanel{background:white;border:1px solid #eeeaf2;border-radius:14px;padding:25px}#chatpanel{max-width:750px}.message,.private-entry{border-bottom:1px solid #eeeaf2;padding:15px 0}.message time{display:block;font-size:11px;color:#82798c;margin-top:5px}.message p,.private-entry p{white-space:pre-wrap;overflow-wrap:anywhere}.private-entry p{margin:5px 0;font-size:12px}.private-entry button{font-size:11px}.emoji-picker{display:flex;gap:5px;margin-bottom:20px;flex-wrap:wrap}.emoji-picker button{padding:7px}.calm{--accent:#6d657f;background:#f6f5f3}.calm .event{background:#f1eff3;border-left-color:#827a8c}.calm .daynumber.current{background:#6d657f}.calm .logo{color:#6d657f}.calm .welcome{background:#eeecef}@media(max-width:650px){.wellbeing-grid{grid-template-columns:1fr}.extras button{flex:1}.logo{letter-spacing:-1px;font-size:22px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
body{background:var(--background,#faf9f6)}.displaytools{display:flex;gap:8px;justify-content:flex-end;margin:10px 0 20px;flex-wrap:wrap}.displaytools button{font-size:12px;min-height:44px}.logo{letter-spacing:-1px;font-size:25px}.extra:not(.calm){background-image:radial-gradient(circle at 10% 20%,#d4bbff55,transparent 35%),radial-gradient(circle at 90% 75%,#ffcae755,transparent 35%)}.extra:not(.calm) #calendar,.extra:not(.calm) #focuspanel{border:2px solid var(--accent);box-shadow:0 8px 32px color-mix(in srgb,var(--accent) 18%,transparent)}.extra:not(.calm) .primary{background:linear-gradient(120deg,var(--accent),#ac67b4)}.large-text .event{font-size:14px}.large-text .event time{font-size:12px}.large-text p,.large-text label{font-size:15px}.large-text .daynumber{font-size:15px}.calm{--accent:#6d657f!important;background:#f6f5f3}.stand aside,.stand header,.stand .displaytools,.stand footer{display:none}.stand main{padding:20px 28px}.stand #standbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.stand #standclock{font:600 28px Manrope,sans-serif;margin-top:8px;letter-spacing:-1px}.stand #wakestatus{font-size:11px;color:#82798c}.stand .toolbar{margin:22px 0 18px}.stand .day{min-height:clamp(110px,17vh,200px)}.stand .event{font-size:14px;padding:9px;white-space:normal}.stand .event time{font-size:11px}.stand .daynumber{font-size:16px;width:32px;height:32px}.stand button{min-height:44px}.stand .extras{margin-top:20px}.stand .calm-toggle{margin-left:auto}.stand .monthnav h2{font-size:26px}@media(orientation:portrait) and (min-width:651px) and (max-width:1100px){aside{width:190px}main{padding:28px 20px}.stand main{padding:24px 16px}.stand .day{min-height:150px}.stand .event{font-size:12px}.stand #standclock{font-size:26px}}@media(orientation:landscape) and (max-height:550px){aside{width:180px;padding:18px}main{padding:16px}header h1{font-size:24px}.toolbar{margin:15px 0}.stand .day{min-height:85px}.stand #standclock{font-size:22px}.sidebarbottom{padding-top:15px}.day{min-height:85px}}@media(max-width:650px){.displaytools{justify-content:stretch}.displaytools button{flex:1}.stand main{padding:16px 8px}.stand #standclock{font-size:20px}.stand .monthnav h2{font-size:18px}.stand .day{min-height:100px}.stand .event{font-size:10px;padding:5px}.stand .event time{font-size:9px}.stand .daynumber{font-size:12px;width:25px;height:25px}}
#calendar{position:relative}#inkcanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#inkcanvas.writing{pointer-events:auto;touch-action:none;cursor:crosshair}#inktools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}#inktools label{display:flex;align-items:center;gap:8px;margin:0}#inktools input{margin:0}#trackers{padding:25px;background:white;border:1px solid #eeeaf2;border-radius:14px}#trackers form{margin-bottom:22px}#calresult{display:block;margin:15px 0;font-weight:600}
.feature-panel{background:#fff;border:1px solid #e8e5ee;border-radius:16px;padding:28px}.feature-panel h2{margin:10px 0;font-size:26px;letter-spacing:-.8px}.feature-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}.feature-heading p{font-size:13px}.task-filters{max-width:230px;margin-top:20px}.task-card,.journal-card,.nudge-card{border:1px solid #e8e5ee;border-radius:12px;padding:18px;margin:12px 0;background:#fdfcfe}.taskcheck{display:flex;align-items:center;gap:12px;margin:0;font-size:15px}.taskcheck input{width:22px;height:22px;accent-color:var(--accent)}.task-detail{padding-left:34px;margin-top:10px}.task-tag{display:inline-block;padding:4px 8px;background:#efedf6;border-radius:6px;font-size:11px;margin:0 6px 5px 0;color:#74698a}.task-steps,.journal-body{white-space:pre-wrap;overflow-wrap:anywhere}.task-done .taskcheck strong{text-decoration:line-through;color:#8e8798}.buttonrow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.buttonrow button{font-size:12px;min-height:40px}.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px}.person-card{border:1px solid #e8e5ee;border-radius:14px;padding:22px;background:#faf9fd}.person-card h3{margin:12px 0 4px}.person-card p{font-size:13px;overflow-wrap:anywhere}.avatar{display:inline-flex;width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}.avatar-fallback{background:#ece6f7;align-items:center;justify-content:center;font:600 22px Manrope,sans-serif;color:#746299}.profile-button{display:grid;grid-template-columns:40px 1fr;align-items:center;text-align:left;column-gap:10px;background:none;border:0;padding:8px 0;width:100%}.profile-button .avatar{width:36px;height:36px;font-size:16px}.profile-button #myavatar{grid-row:1/3}.sidebarbottom .profile-button span{margin:0}.profile-button small{color:#90859d;font-size:10px}.profile-preview .avatar{width:80px;height:80px;font-size:32px}.profile-preview{margin-bottom:20px}.checklabel{display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.6}.checklabel input{margin-top:4px;flex-shrink:0;accent-color:var(--accent)}.space-tabs{display:flex;gap:8px;margin:24px 0;flex-wrap:wrap}.space-tabs button{flex:1;min-height:44px}.space-tabs .active{background:#eee9fa;border-color:#b9a8ea}.tool-card{background:#f7f5fb;padding:24px;border-radius:14px;margin-top:22px}.tool-card p,.tool-card li{font-size:14px;line-height:1.8}.tool-card label{max-width:450px}#toolsform{margin:20px 0}#focustimer{font:600 54px Manrope,sans-serif;letter-spacing:-2px;display:block;color:#766493;font-variant-numeric:tabular-nums}.journal-card summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center}.journal-card time{font-size:11px;color:#9689a2;white-space:nowrap}.journal-body{font-size:14px;line-height:1.9;color:#63586f}.today-task{display:block;margin:8px 0;text-align:left;width:100%;padding:14px}.pet-scene{background:radial-gradient(ellipse at bottom,#e2eddf 15%,#f2edf9 70%);border-radius:100px 100px 24px 24px;max-width:370px;margin:30px auto;text-align:center;padding:35px 20px 18px}.pet-scene #petillustration{font-size:100px;line-height:1.3;filter:drop-shadow(0 8px 4px #6e5b801a)}.pet-ground{font-size:25px;letter-spacing:12px}#space-pet{max-width:650px;margin:auto}#space-pet h3,#space-pet>p{text-align:center}.pet-bounce{animation:pet-hello .7s ease-in-out 2}@keyframes pet-hello{50%{transform:translateY(-9px) rotate(4deg)}}.schedule-scroll{overflow:auto;max-height:65vh}.schedule-grid{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr))}.weekly .schedule-grid{min-width:700px}.schedule-day{border-right:1px solid #eeeaf2;min-width:0}.schedule-day:last-child{border:0}.schedule-day h3{position:sticky;top:0;background:#faf9fc;margin:0;padding:15px;font-size:12px;text-align:center;z-index:1;border-bottom:1px solid #eeeaf2}.schedule-day h3.is-today{color:#7963ba;background:#f1ecfa}.time-slot{min-height:64px;border-bottom:1px solid #eeeaf2;padding:9px;cursor:pointer}.time-slot:hover{background:#faf8fe}.time-slot>time{display:block;color:#9b91a5;font-size:10px;margin-bottom:6px}.daily .time-slot{padding-left:80px;position:relative;min-height:70px}.daily .time-slot>time{position:absolute;left:15px;top:14px}.daily .event{font-size:14px;padding:10px}.segmented{flex-wrap:wrap}.segmented button{padding:7px 10px}.extras{align-items:center}.extras button{min-height:42px}.stand .schedule-scroll{max-height:74vh}@media(max-width:900px){.toolbar{flex-wrap:wrap}.segmented{margin-left:auto}.feature-panel{padding:20px}}@media(max-width:650px){.feature-panel{padding:18px}.feature-heading{align-items:flex-start;flex-direction:column}.feature-heading h2{font-size:23px}.task-detail{padding-left:0}.feature-panel p{font-size:12px}.journal-card summary{align-items:flex-start;flex-direction:column;gap:6px}.people-grid{grid-template-columns:1fr}.extras button{flex:1 0 28%;font-size:11px}.calm-toggle{font-size:11px}.profile-button{max-width:230px}.stand .daily .event{font-size:13px}.space-tabs button{font-size:11px;padding:9px 7px}.taskcheck{font-size:14px}.daily .time-slot{padding-left:60px}.weekly .schedule-grid{min-width:650px}.segmented{width:100%;justify-content:center}.segmented button{flex:1}.feature-panel input,.feature-panel textarea,dialog input,dialog textarea{font-size:16px!important}}
/* Theme colors follow the selected accent instead of fixed lavender. */
.primary{color:var(--on-accent,#fff)}.logo{color:color-mix(in srgb,var(--accent) 72%,#292433)}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--accent)}.daynumber.current{background:var(--calendar-accent,var(--accent));color:var(--on-calendar-accent,var(--on-accent,#fff))}#calendar{border-color:color-mix(in srgb,var(--calendar-accent,var(--accent)) 30%,#e8e5ee)}.weekdays,.schedule-day h3{background:color-mix(in srgb,var(--calendar-accent,var(--accent)) 7%,white)}.day{background:color-mix(in srgb,var(--calendar-accent,var(--accent)) 2%,white)}.day.other{background:color-mix(in srgb,var(--calendar-accent,var(--accent)) 5%,#fafafa)}.day:hover,.time-slot:hover{background:color-mix(in srgb,var(--calendar-accent,var(--accent)) 9%,white)}.schedule-day h3.is-today{background:var(--calendar-accent,var(--accent));color:var(--on-calendar-accent,var(--on-accent,#fff))}.segmented .active,.space-tabs .active{background:color-mix(in srgb,var(--accent) 15%,white);border-color:var(--accent)}.task-tag,.avatar-fallback{background:color-mix(in srgb,var(--accent) 12%,white);color:color-mix(in srgb,var(--accent) 55%,#292433)}#focustimer{color:color-mix(in srgb,var(--accent) 65%,#292433)}.extra:not(.calm) .primary{background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 75%,white));color:var(--on-accent,#fff)}.calm{--on-accent:#fff!important}.calm #calendar{--calendar-accent:#827a8c!important;--on-calendar-accent:#fff!important}.calm .daynumber.current{background:#6d657f;color:white}
#designbanner{display:none;position:relative;min-height:110px;border-radius:20px;margin-bottom:24px;background-color:color-mix(in srgb,var(--accent) 8%,white);background-image:var(--design-image);background-repeat:no-repeat;background-position:right -12px bottom -38px;background-size:235px;overflow:hidden;align-items:center;padding:25px 210px 25px 25px}#designcaption{font:600 24px Manrope,sans-serif;letter-spacing:-.6px;color:#63516c}.extra:not(.calm) #designbanner{display:flex}.extra:not(.calm) #calendar:before{content:'';position:absolute;right:-10px;bottom:-25px;width:165px;height:130px;background:var(--design-image) no-repeat center/contain;opacity:.45;pointer-events:none;z-index:2}.calm #designbanner{display:none!important}.water-goal-card{padding:20px;background:color-mix(in srgb,var(--accent) 6%,white);border:1px solid #e8e5ee;border-radius:14px;margin:20px 0}#waterprogress{width:100%;height:18px;accent-color:var(--accent)}#watergoalstatus{font-size:13px;color:#65586f}#announcement{background:color-mix(in srgb,var(--accent) 12%,white);padding:15px 20px;border-radius:12px;margin-bottom:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #eeeaf2}.admin-row p{font-size:12px;margin:6px 0;overflow-wrap:anywhere}#admincounts{font-size:15px;font-weight:600;margin:22px 0}.admin-row button{font-size:12px}#announcementform{max-width:650px;margin:25px 0}.stand #designbanner{min-height:85px;background-size:190px;margin-bottom:14px}.stand #designcaption{font-size:20px}@media(min-width:651px){aside{position:sticky;top:0;height:100dvh;overflow-y:auto}}@media(max-width:650px){#designbanner{padding:20px 125px 20px 18px;min-height:95px;background-size:170px;background-position:right -28px bottom -34px}#designcaption{font-size:18px}.admin-row{align-items:flex-start;flex-direction:column;gap:8px}.extra:not(.calm) #calendar:before{width:105px;height:90px;opacity:.3}.stand #designbanner{min-height:70px}.stand #designcaption{font-size:16px}}
.tiny-help{font-size:12px;line-height:1.7;margin:12px 0;color:#756a80}.tiny-help summary{cursor:pointer;font-weight:600}.tiny-help p{max-width:800px;font-size:12px}.order-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #eeeaf2;padding:10px 0}.order-row span{flex:1;font-size:13px}.order-row button{min-width:42px;min-height:42px}#customdock[data-align=right] .displaytools,#customdock[data-align=right] .extras{justify-content:flex-end}#customdock[data-align=left] .displaytools,#customdock[data-align=left] .extras{justify-content:flex-start}.sound-settings{border:1px solid #e8e5ee;border-radius:12px;padding:18px;margin:20px 0}.sound-settings legend{font-weight:600;font-size:13px}.linkbutton{display:inline-block;text-decoration:none;border-radius:9px;margin:12px 8px 12px 0}.stand #customdock .displaytools{display:flex}.stand #customdock #stand{display:none}#layoutbottom{margin-top:20px}

.pet-scene{position:relative}#petillustration{border:0;background:transparent;cursor:pointer;font-size:100px;line-height:1.4;padding:12px;touch-action:manipulation}#pet-effect{position:absolute;left:62%;top:25%;font-size:42px;pointer-events:none}.pet-food{touch-action:none;position:relative;z-index:2;min-height:48px}#petillustration.pet-play{animation:petplay .55s ease-in-out 4}#petillustration.pet-pet{animation:petcuddle .7s ease-in-out 3}#petillustration.pet-feed{animation:petcuddle .35s ease-in-out 6}#petillustration.pet-rest{transform:rotate(-12deg)}@keyframes petplay{50%{transform:translateY(-26px) rotate(12deg)}}@keyframes petcuddle{50%{transform:scale(1.12) rotate(-5deg)}}@media(prefers-reduced-motion:reduce){#petillustration{animation:none!important}}

#inkcanvas.writing.pen-only{touch-action:none}#inkcanvas.erasing{cursor:cell}#inktools [aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,white);border-color:var(--accent)}

.journal-prompt{padding:14px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,white);color:#63516c;font-size:14px;line-height:1.6}

.install-steps{padding-left:25px}.install-steps li{padding:8px 0 12px 7px;line-height:1.6;font-size:14px}.install-steps span{display:block;color:#7c7186;font-size:13px;margin-top:5px}.setup-status{padding:14px;background:color-mix(in srgb,var(--accent) 10%,white);color:#63516c;border-radius:10px}button:disabled{opacity:.55;cursor:default}#installdialog,#pushdialog{max-height:90dvh;overflow-y:auto}

#accounttoggle{display:none}#inkstatus{flex-basis:100%;margin:0;min-height:0}#inkstatus:empty{display:none}@media(max-width:650px){aside{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px}aside>.logo{grid-column:1;grid-row:1;font-size:22px}#accounttoggle{display:block;grid-column:2;grid-row:1;font-size:11px;padding:10px;min-height:44px}aside>:not(.logo):not(#accounttoggle){grid-column:1/-1}aside[data-expanded=false]>:not(.logo):not(#accounttoggle){display:none!important}aside .sectionhead{margin:6px 0}aside #calendars{display:flex;flex-wrap:wrap;gap:10px}.calrow{margin:0;max-width:100%;gap:8px}.calrow input[type=color]{flex-shrink:0}.calrow label{margin-bottom:0;min-width:0}.sidebarbottom{border-top:1px solid #eeeaf2;padding-top:14px}.sidebarbottom .profile-button{flex:1 1 190px}.sidebarbottom>button:not(.profile-button){min-height:44px}main{padding:18px 12px}header h1{font-size:25px;margin:8px 0}header p{margin-bottom:8px}.displaytools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.displaytools button{min-width:0;min-height:44px;font-size:12px;line-height:1.4;padding:10px 8px;flex:none}.extras{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:14px 0;padding-bottom:8px;scrollbar-width:thin}.extras button{flex:0 0 auto;min-width:100px;white-space:nowrap;min-height:44px}.extras .calm-toggle{flex:0 0 auto;white-space:nowrap;margin:0 8px;align-self:center}.tiny-help{margin:6px 0 12px}#inktools{gap:8px}#inktools>button{font-size:12px;min-height:44px}.toolbar{margin:18px 0 14px}.stand #customdock .displaytools{display:grid}.stand aside{display:none}}@media(max-width:360px){aside>.logo{font-size:19px}#accounttoggle{font-size:10px;padding:8px}.displaytools button{font-size:11px}}

/* Test-only personal progress tools. Uses existing theme variables. */
#pretty-progress{margin-top:28px;display:grid;gap:16px}
#pretty-progress>h2{margin-bottom:0}
.progress-card{border:1px solid #e7e2ef;border-radius:16px;padding:18px;background:color-mix(in srgb,var(--background,#faf9f6) 35%,white);min-width:0}
.progress-card h3{margin-top:0}
.progress-form{display:grid;gap:10px;margin:12px 0}
.progress-form label{display:grid;gap:5px}
.progress-item{border-top:1px solid #e9e4ed;padding:12px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.progress-item strong,.progress-item p,.progress-item progress{width:100%;margin:0}
.progress-item progress{height:12px;accent-color:var(--accent)}
.progress-item .buttonrow{display:flex;gap:8px;flex-wrap:wrap}
#pretty-progress textarea{width:100%;max-width:100%}
#progress-tool-order .progress-item span{flex:1}
#space-tools{display:flex;flex-direction:column}
#space-tools[hidden]{display:none!important}
#quick-water{margin:14px 0}
#quick-water .primary{background:var(--accent)}

/* Sleek, consolidated controls in the test interface */
.settings-actions{display:grid;gap:10px;margin:12px 0 20px}
.settings-actions button{text-align:left;padding:13px 15px}
.customize-arrange{margin:18px 0;padding:14px;border:1px solid #e8e3ed;border-radius:12px}
.customize-arrange summary{cursor:pointer;font-weight:650}
.customize-arrange details[open]>label,.customize-arrange details[open]>.order-row{margin-top:12px}
#planneraccountemail{font-weight:600;margin-top:0}

/* Compact, always-visible header actions on mobile and desktop. */
header .header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}header #plannersettings{min-width:42px;min-height:42px;padding:8px 12px;border-radius:12px;font-size:21px;line-height:1}header #headerinstall{min-height:42px;padding:8px 13px;border-radius:12px;font-weight:650;white-space:nowrap}header .header-actions #mobileadd{margin:0}@media(max-width:620px){header .header-actions{gap:6px}header #headerinstall{padding:8px 10px;font-size:13px}header #plannersettings{padding:8px 10px}}

/* Settings belongs beside Calendars & account, not in the main greeting. */
aside .account-heading{display:flex;align-items:center;gap:6px;justify-content:space-between}aside .account-heading #accounttoggle{flex:1;min-width:0;text-align:left}aside .account-heading #plannersettings{flex:0 0 42px;width:42px;min-height:42px;padding:5px;border:0;background:transparent!important;box-shadow:none!important;color:inherit;font-size:22px;line-height:1;cursor:pointer}aside .account-heading #plannersettings:hover,aside .account-heading #plannersettings:focus-visible{background:rgba(127,127,127,.1)!important;border-radius:50%}#quicksettings #installshortcut{display:inline-flex!important;align-items:center;justify-content:center}

/* Keep Calendars & account plus Settings visible together in the top-right. */
aside .account-heading{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-left:auto;width:max-content;max-width:100%}aside .account-heading #accounttoggle{display:inline-flex;align-items:center;justify-content:center;min-height:42px;font-size:12px;white-space:nowrap;padding:8px}aside .account-heading #plannersettings{display:inline-flex;align-items:center;justify-content:center;background:transparent!important;border:0!important;box-shadow:none!important}
@media(max-width:650px){aside>.account-heading{grid-column:2;grid-row:1;justify-self:end;margin:0;z-index:2}aside>.logo{grid-column:1;grid-row:1}aside[data-expanded=false]>.account-heading{display:flex!important}aside[data-expanded=false]>.logo{display:block!important}aside[data-expanded=false]>.account-heading #accounttoggle,aside[data-expanded=true]>.account-heading #accounttoggle{display:inline-flex!important}aside[data-expanded=false]>.account-heading #plannersettings{display:inline-flex!important}aside{grid-template-columns:minmax(0,1fr) max-content;gap:6px;padding:12px}aside .account-heading #accounttoggle{font-size:11px;padding:6px}aside .account-heading #plannersettings{width:38px;min-width:38px;min-height:42px;flex-basis:38px}}

.planner-reminder-options{display:grid;gap:10px;margin:12px 0}.planner-reminder-options label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.planner-reminder-options input[type=checkbox]{width:18px;height:18px}.pp-attention{position:relative}.pp-attention:after{content:'';position:absolute;right:5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--accent,#8876dc);box-shadow:0 0 10px 3px var(--accent,#8876dc);pointer-events:none}.pp-dnd .pp-attention:after,.pp-no-glow .pp-attention:after{box-shadow:none}.pp-dnd .pp-attention:after{display:none}

/* Pin Account & settings together in the upper-right of the home page. */
aside .account-heading{position:fixed;top:12px;right:16px;left:auto;z-index:70;width:auto;max-width:calc(100vw - 32px);padding:3px 5px;border-radius:12px;background:var(--surface,rgba(255,255,255,.93));box-shadow:0 2px 10px rgba(30,20,40,.06)}main>header{padding-top:46px}@media(max-width:650px){aside>.account-heading{position:fixed;top:8px;right:8px;grid-column:auto;grid-row:auto;max-width:calc(100vw - 145px);padding:0;background:var(--surface,rgba(255,255,255,.95))}aside .account-heading #accounttoggle{white-space:normal;text-align:center;font-size:10px;line-height:1.15}main>header{padding-top:12px}}

/* Account menu must live in the actual home header, never inside collapsed sidebar. */
main>header{position:relative}main>header>.account-heading{position:absolute;top:0;right:0;display:flex!important;align-items:center;gap:4px;z-index:15;max-width:100%;margin:0;padding:0;background:transparent;box-shadow:none}main>header>.account-heading #accounttoggle{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:7px 10px;font-size:12px;white-space:nowrap}main>header>.account-heading #plannersettings{display:inline-flex!important;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;padding:4px;border:0!important;background:transparent!important;box-shadow:none!important;color:inherit;font-size:22px;cursor:pointer}main>header>.account-heading #plannersettings:hover{background:rgba(125,125,125,.08)!important;border-radius:50%}@media(max-width:650px){main>header{padding-top:55px!important}main>header>.account-heading{top:0;right:0}main>header>.account-heading #accounttoggle{font-size:12px;white-space:nowrap}}

/* One mobile header row: logo left, Account & settings right. */
@media(max-width:650px){aside{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:16px 14px!important}aside>.logo{grid-column:1!important;grid-row:1!important;min-width:0;white-space:nowrap;font-size:21px!important}aside>.account-heading{display:flex!important;grid-column:2!important;grid-row:1!important;position:static!important;justify-self:end!important;max-width:none!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important}aside>.account-heading #accounttoggle{display:inline-flex!important;white-space:nowrap!important;font-size:12px!important;padding:7px 9px!important;min-height:38px!important}aside[data-expanded=false]>.account-heading{display:flex!important}main>header{padding-top:12px!important}}
@media(min-width:651px){aside>.account-heading{position:static!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:10px 0!important;width:100%!important;justify-content:flex-end!important}aside>.account-heading #accounttoggle{display:inline-flex!important}}

/* Fix collapsed mobile sidebar rule hiding Account & settings: stronger selector than legacy :not() rule. */
@media(max-width:650px){#app aside[data-expanded="false"] > div.account-heading{display:flex!important;visibility:visible!important;opacity:1!important;grid-column:2!important;grid-row:1!important;position:static!important;align-items:center!important;justify-self:end!important}#app aside[data-expanded="true"] > div.account-heading{display:flex!important;grid-column:2!important;grid-row:1!important;position:static!important;justify-self:end!important}#app aside .account-heading #accounttoggle{display:inline-flex!important;visibility:visible!important}}

/* Calendars belong to the planner, not the account drawer. */
#homecalendars{margin:14px 0 8px;padding:12px 14px;border:1px solid #e8e5ee;border-radius:14px;background:var(--surface,#fff)}#homecalendars .sectionhead{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:12px;letter-spacing:.06em;font-weight:750}#homecalendars #calendars{display:flex;flex-wrap:wrap;gap:8px}#homecalendars .calrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 8px;border-radius:10px;background:rgba(150,125,180,.06)}#homecalendars .calrow label{margin:0}#homecalendars .calrow button{min-width:32px;min-height:32px}@media(max-width:650px){#homecalendars{margin:10px 0;padding:10px}#homecalendars #calendars{gap:6px}#homecalendars .calrow{max-width:100%}}

/* Compact, tap-to-expand handwriting palette. */
.inktoolbar-shell{margin:10px 0 12px}.inktoolbar-shell>#inktoolbarbutton{border:1px solid #ddd3ed;background:#fff;border-radius:12px;min-height:42px;padding:8px 14px;font-weight:650}.inktoolbar-shell>#inktools:not([hidden]){display:flex;margin-top:9px;padding:12px;background:#faf8fe;border:1px solid #e6e0f1;border-radius:14px}.inktoolbar-shell>#inktools[hidden]{display:none!important}

#quickactions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}#quickactions button{min-height:46px;padding:9px 10px;border:1px solid #e0d9ee;background:#fff;border-radius:13px;font-weight:700}#quickactions #quickevent{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent,#fff)!important}@media(max-width:650px){#quickactions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tablet-friendly collapsible account settings and independent friends */
#accountsettingsbody[hidden]{display:none!important}
#accounttoggle{cursor:pointer}
#friendcenter{border:1px solid var(--border,#e9e3ef);border-radius:14px;padding:14px;margin:12px 0;background:var(--card,#fff)}
#friendcenter input{width:100%;box-sizing:border-box}
#friendresults button,#friendrequests button{margin:4px;padding:7px 10px}
#friendresults p,#friendrequests p{margin:8px 0}
@media (min-width:651px) and (max-width:1180px){
 aside{width:210px;padding:18px 12px}
 #accounttoggle{width:100%;text-align:left;white-space:normal}
 #accountsettingsbody{max-height:calc(100dvh - 155px);overflow-y:auto}
 #accountsettingsbody .sidebarbottom{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 #accountsettingsbody .sidebarbottom>*{max-width:100%;box-sizing:border-box}
 #accountsettingsbody input{width:100%;min-width:0;box-sizing:border-box}
 #accountsettingsbody button{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:650px){
 #accountsettingsbody .sidebarbottom{display:flex;flex-direction:column;align-items:stretch}
 #accountsettingsbody input{width:100%;box-sizing:border-box}
}

/* Full calendar workspace when the user hides the sidebar */
#sidebarclose{align-self:flex-start;border:1px solid #e7e1ee;background:transparent;border-radius:10px;padding:8px 11px;margin-bottom:14px;cursor:pointer}
#sidebaropen{position:fixed;left:12px;top:12px;z-index:50;border:1px solid #e7e1ee;background:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 2px 12px #0001;cursor:pointer}
#app.sidebar-collapsed #plannersidebar{display:none!important}
#app.sidebar-collapsed main{flex:1 1 auto;width:100%;max-width:none;min-width:0}
#app.sidebar-collapsed main header{padding-left:42px}
#app.sidebar-collapsed #sidebaropen:not([hidden]){display:block}

/* Profile avatar and quick daily status */
.profile-button #myavatar{display:flex;align-items:center;justify-content:center;min-width:40px;width:40px;height:40px;overflow:hidden;grid-row:1/3}
.profile-button #myavatar .avatar{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;line-height:1;border-radius:50%;overflow:hidden;margin:0}
.profile-button #myavatar .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-button #username{min-width:0;overflow-wrap:anywhere}
.quickstatusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
#quickstatus{border:1px solid var(--accent,#8876dc);border-radius:12px;padding:10px 14px;background:var(--surface,#fff);cursor:pointer}
#quickstatussummary{font-size:13px;opacity:.75}


/* Companion game interactions and optional care dashboard */
#companionpanel{max-width:720px;margin-inline:auto}
#companionpanel .pet-scene{position:relative;overflow:hidden}
#companionpanel #petillustration{cursor:pointer;border:0;background:transparent;transition:transform .25s ease}
#companionpanel #pet-effect{display:inline-block;position:absolute;top:20%;right:22%;font-size:34px;pointer-events:none}
#companionpanel .pet-water #petillustration,#companionpanel .pet-clean #petillustration{animation:pet-care-wiggle .7s ease-in-out 2}
#companionpanel .pet-play #petillustration,#companionpanel .pet-pet #petillustration{animation:pet-hello .7s ease-in-out 2}
#companionpanel .pet-rest #petillustration{transform:rotate(-12deg) scale(.92)}
@keyframes pet-care-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) translateY(-4px)}75%{transform:rotate(10deg) translateY(-4px)}}
.pet-game-status{display:grid;gap:7px;max-width:400px;margin:18px auto;text-align:center}
.pet-game-status progress{width:100%;accent-color:var(--accent,#8876dc)}
.pet-care-toggle{margin:16px auto;max-width:440px}
.pet-care-status{max-width:460px;margin:12px auto;padding:14px;border:1px solid #e9dff0;border-radius:16px;background:#fff9fe}
.pet-needs{display:grid;gap:10px;margin:12px 0}
.pet-needs span{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pet-needs progress{width:58%;accent-color:var(--accent,#8876dc)}
#companionpanel [data-pet-action]{min-height:46px}

/* Companion action animation fixes: action classes are on the button itself. */
#companionpanel #petillustration.pet-water,#companionpanel #petillustration.pet-clean{animation:pet-care-wiggle .7s ease-in-out 2}
#companionpanel #petillustration.pet-play,#companionpanel #petillustration.pet-pet,#companionpanel #petillustration.pet-feed{animation:pet-care-wiggle .55s ease-in-out 2}
#companionpanel #petillustration.pet-rest{transform:rotate(-12deg) scale(.92)}
#companionpanel #pet-effect:not(:empty){animation:pet-effect-pop .65s ease-out both}
@keyframes pet-effect-pop{from{opacity:0;transform:translateY(12px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#companionpanel #petillustration,#companionpanel #pet-effect{animation:none!important;transition:none!important}}

/* Stand mode display choices */
.stand-switch{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.stand-switch button{border-radius:999px;min-height:42px}
.stand-switch button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.stand-clock-view{width:100%;min-height:min(68vh,650px);display:grid;place-items:center;padding:22px}
.stand-clock-face{width:min(100%,900px);min-height:clamp(260px,50vh,520px);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px}
.stand-clock-face #standclocktime{font-variant-numeric:tabular-nums;font-size:clamp(64px,13vw,180px);font-weight:800;line-height:1;letter-spacing:-.07em}
.stand-clock-face #standclockdate{font-size:clamp(17px,2.6vw,28px);font-weight:600}
.stand-clock-face.flip-clock{background:#16141b;color:#fff;box-shadow:inset 0 -7px 0 #29262e,0 18px 50px #0002}
.stand-clock-face.flip-clock #standclocktime{font-family:Manrope,sans-serif;text-shadow:0 3px 0 #7775}
.stand-clock-face.sun-clock{background:radial-gradient(circle at 50% 42%,#fff7bd 0%,#ffe2ac 38%,#f6a8aa 100%);color:#593c50;box-shadow:0 18px 55px #f6a8aa55}
body.stand[data-stand-display=flip] #calendar,body.stand[data-stand-display=sun] #calendar{display:none!important}
@media(max-width:650px){.stand-clock-view{padding:8px}.stand-clock-face{min-height:52vh;border-radius:18px}.stand-switch{justify-content:center}}

/* Social shortcuts and persistent conversation inbox */
.alert-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#d94575;color:white;font-size:12px;font-weight:800;margin-left:4px}
.conversation-list{display:grid;gap:8px;margin:12px 0 22px}
.conversation-list button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;width:100%;border:1px solid #e8e3ee;background:#fff;border-radius:13px;padding:13px 15px}
.conversation-list button:hover,.conversation-list button:focus-visible{background:#f8f2ff;border-color:var(--accent)}
.conversation-list button span{color:#5e5968;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-list button small{color:#88808e}

/* Responsive parity and clock presentation */
#accountsettingsbody:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important}
@media(max-width:650px){#app aside #accountsettingsbody:not([hidden]){display:block!important;grid-column:1/-1!important;width:100%;position:relative;z-index:30}#app aside[data-expanded=false] #accountsettingsbody:not([hidden]){display:block!important}#app aside #accountsettingsbody button{min-height:42px}#app aside .account-heading{z-index:35}#quickactions{grid-template-columns:repeat(2,minmax(0,1fr))}#quickactions button{white-space:normal;overflow-wrap:anywhere}#chatpanel,.feature-panel{max-width:100%;min-width:0;padding:15px}#homecalendars .calrow{width:100%}}
.stand-clock-controls{display:flex;justify-content:center;align-items:center;gap:14px;padding:10px;flex-wrap:wrap}
.stand-clock-controls label{display:flex;align-items:center;gap:7px;font-size:13px}
.stand-clock-face.flip-clock{background:var(--flip-clock-color,#16141b)}
.stand-clock-face.flip-clock #standclocktime{transform-origin:center;perspective:900px}
.clock-flipping{animation:pretty-clock-flip .65s ease-in-out}
@keyframes pretty-clock-flip{0%{transform:rotateX(-75deg);opacity:.4}55%{transform:rotateX(12deg);opacity:1}100%{transform:rotateX(0)}}
body[data-sun-phase=sunrise] .sun-clock{background:linear-gradient(165deg,#584e9b 0%,#f49e9b 48%,#ffdb9e 78%,#ffeec8 100%);color:#3d3156}
body[data-sun-phase=day] .sun-clock{background:linear-gradient(165deg,#79bde9 0%,#c6e8ff 45%,#fff2b7 100%);color:#285070}
body[data-sun-phase=sunset] .sun-clock{background:linear-gradient(165deg,#554482 0%,#d86c91 38%,#ffac80 73%,#ffd5a2 100%);color:#fff}
body[data-sun-phase=night] .sun-clock{background:linear-gradient(165deg,#101c45 0%,#3b396e 55%,#75507e 100%);color:#fff}
#standclockview:fullscreen{background:#10101b;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0}
#standclockview:fullscreen .stand-clock-face{width:100%;height:100%;max-width:none;border-radius:0;flex:1}
.clock-immersive #standclockview{position:fixed!important;inset:0;z-index:9999;background:#16141b;padding:0;display:flex;flex-direction:column}
.clock-immersive #standclockview .stand-clock-face{flex:1;width:100%;border-radius:0}
@media(orientation:landscape){body.stand[data-stand-display=sun] .stand-clock-view,body.stand[data-stand-display=flip] .stand-clock-view{min-height:calc(100dvh - 130px)}body.stand .stand-clock-face{width:100%;min-height:65dvh}}
@media(prefers-reduced-motion:reduce){.clock-flipping{animation:none}}

.social-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.social-heading h2{margin:0}
.social-heading button{border-radius:999px;background:var(--accent);color:white;border:0;min-height:42px;font-weight:700}
.social-list-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #eee8f1;padding:12px 0}
.social-list-row strong{flex:1;min-width:110px}
.social-list-row span{font-size:12px;color:#81798b}
.social-list-row button{min-height:40px}
#newmessagepanel{padding:14px;background:#faf7ff;border-radius:12px;margin:12px 0}
#friendaddpanel{padding:12px;border:1px solid #e7e1ef;border-radius:12px;margin:12px 0}
#friendcenter h3{margin-top:22px}
@media(max-width:650px){.social-heading{align-items:center}.social-heading h2{font-size:22px}.social-list-row{gap:8px}}

/* Messaging */
#messages{display:flex;flex-direction:column;gap:9px;min-height:40px;margin-top:14px}
#messages .chat-bubble{max-width:min(82%,490px);width:max-content;min-width:90px;padding:10px 14px;border:0;border-radius:18px;margin:0;overflow-wrap:anywhere}
#messages .chat-bubble.mine{align-self:flex-end;background:var(--pretty-my-bubble,#8876dc);color:white;border-bottom-right-radius:5px}
#messages .chat-bubble.theirs{align-self:flex-start;background:var(--pretty-their-bubble,#ede9f5);color:#28232e;border-bottom-left-radius:5px}
#messages .chat-bubble strong{font-size:11px;opacity:.8}
#messages .chat-bubble p{margin:4px 0;line-height:1.5;color:inherit;font-size:14px}
#messages .chat-bubble time{font-size:10px;color:inherit;opacity:.75}
.chat-appearance{display:flex;gap:14px;flex-wrap:wrap;padding:8px 0}
.chat-appearance label{font-size:12px;display:flex;align-items:center;gap:7px}
.chat-appearance input{width:38px;height:32px;padding:0}
#typingnotice{font-size:12px;color:#81718f;min-height:20px}
.has-alert{animation:pretty-alert-glow 2s ease-in-out infinite}
@keyframes pretty-alert-glow{0%,100%{box-shadow:0 0 0 0 #df71a044}50%{box-shadow:0 0 0 5px #df71a066,0 0 16px #df71a099}}
@media(prefers-reduced-motion:reduce){.has-alert{animation:none;outline:2px solid #d94575}}

/* iPad ink surface: prevent callout, selection and gesture-driven interruption while writing. */
#inkcanvas.writing{ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain; }
#inkcanvas.writing.finger-ink{touch-action:none;}
#inkcanvas.writing:not(.finger-ink){touch-action:none;}

/* Calendar colors are individual to the viewer. Apply the exact chosen hue to event cards, not only the current date. */
#calendar .event{border-left:5px solid var(--c,#8876dc);background:color-mix(in srgb,var(--c,#8876dc) 38%,white);color:#25212b}
#calendar .event time{opacity:.85}
.calm #calendar .event{border-left-color:var(--c,#8876dc);background:color-mix(in srgb,var(--c,#8876dc) 38%,white)}
#calendarfilters .calrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
#calendarfilters input[type=color]{width:38px;height:32px;min-width:38px;cursor:pointer}

/* Calendar management is a single organized control, not three unrelated controls in a row. */
#calendars{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px!important;align-items:stretch}
#calendars>label{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0!important}
#calendars>label select{max-width:100%;min-width:170px}
#calendars>.calrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0}
#calendars>.calrow strong{flex:1 1 190px}
#calendars>details{width:100%;border-top:1px solid #ece8ef;padding-top:8px}
#calendars>details>summary{font-weight:600;list-style-position:inside}
#calendars>details .calrow{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
#calendarfilterlist{display:grid;gap:8px;padding:8px 0}
#calendarfilterlist>.calrow{display:grid!important;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:12px;padding:8px 0}
#calendarfilterlist>.calrow label{min-width:0;overflow-wrap:anywhere}
#calendarfilterlist>.calrow input[type=color]{justify-self:end}
#calendarfilterlist>.shared-event-filters{grid-column:1/-1}

/* Compact calendar selector: no full-width school calendar card. */
#calendars{gap:4px!important}
#calendars>.calendar-picker-label{display:flex!important;flex-direction:column;align-items:flex-start;gap:7px;font-weight:600}
#calendars>.calendar-picker-label select{width:min(100%,330px);min-width:0;max-width:100%;font-weight:500}
#calendars>.calendar-picker-hint{margin:0 0 6px;font-size:12px}
#calendars>details{margin-top:4px}
#calendars>details>summary{padding:9px 2px;cursor:pointer}

/* Slowly drifting color hues for both clock styles. No flashing or rapid movement. */
.stand-clock-face.sun-clock{
 background-size:190% 190%;
 animation:pretty-clock-hues 24s ease-in-out infinite alternate;
}
.stand-clock-face.flip-clock{
 position:relative;isolation:isolate;overflow:hidden;
}
.stand-clock-face.flip-clock::before{
 content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 25% 35%,rgba(221,148,243,.23),transparent 43%),radial-gradient(ellipse at 78% 70%,rgba(125,183,255,.19),transparent 45%);
 background-size:150% 150%;
 animation:pretty-clock-hues 28s ease-in-out infinite alternate;
}
@keyframes pretty-clock-hues{
 0%{background-position:0% 30%;filter:hue-rotate(0deg)}
 50%{background-position:100% 70%;filter:hue-rotate(10deg)}
 100%{background-position:25% 100%;filter:hue-rotate(-8deg)}
}
@media(prefers-reduced-motion:reduce){
 .stand-clock-face.sun-clock,.stand-clock-face.flip-clock::before{animation:none}
}

.members-dialog{width:min(94vw,540px);max-height:85dvh;overflow:auto;border:1px solid #d7c3df;border-radius:18px;padding:22px;background:var(--surface,#fff);color:var(--text,#302438);box-shadow:0 20px 75px #0005}
.members-dialog::backdrop{background:#21192d80}
.members-panel{display:grid;gap:14px}.members-panel h2,.members-panel h3{margin:0}.members-panel form{display:grid;gap:12px}.members-panel form label{display:grid;gap:5px}.members-panel input,.members-panel select{width:100%;min-height:42px}.member-list{display:grid;gap:8px}.member-list .calrow{flex-wrap:wrap;gap:8px}

.water-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:10px;margin:14px 0}.water-presets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:105px;border:1px solid #dbc7e8;border-radius:15px;background:linear-gradient(155deg,#fff,#f2ebff);font-size:29px;transition:transform .2s,box-shadow .2s}.water-presets button strong{font-size:15px}.water-presets button small{font-size:11px}.water-presets button.selected{outline:2px solid var(--accent,#8876dc);box-shadow:0 5px 20px #b7a0d455}.water-presets button:hover{transform:translateY(-3px)}.water-presets button.selected{animation:water-bob 2.4s ease-in-out infinite}@keyframes water-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.water-presets button{transition:none;animation:none!important}}

.water-presets .water-vessel{display:block;width:62px;height:76px;overflow:visible;filter:drop-shadow(0 4px 4px #73a5c43a)}.water-presets button{font-size:inherit}.water-presets button.selected .water-vessel{animation:water-vessel-swish 1.9s ease-in-out infinite}@keyframes water-vessel-swish{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@media(prefers-reduced-motion:reduce){.water-presets button.selected .water-vessel{animation:none}}

.calorie-list-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.calorie-list-heading h4{margin:0}.calorie-entry{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.calorie-entry span{flex:1;min-width:120px}.calorie-entry small{display:block;opacity:.7}.calorie-entry strong{white-space:nowrap}.calorie-entry button{margin-left:auto}

/* User-customizable notification glow. */
#quickchat.chat-new-glow,#quickchat.has-alert{box-shadow:0 0 0 3px color-mix(in srgb,#ff69b4 30%,transparent),0 0 18px #ff69b4;border-color:#ff69b4;animation:chat-notification-pulse 1.8s ease-in-out infinite}
@keyframes chat-notification-pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,#ff69b4 14%,transparent),0 0 28px #ff69b4}}
@media(prefers-reduced-motion:reduce){#quickchat.chat-new-glow,#quickchat.has-alert{animation:none}}
/* Only flip mode animates the digits. Sun mode animates its atmosphere instead. */
.stand-clock-face.sun-clock{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#fff7bd,#ffe2ac,#f6a8aa,#fbd5ef,#fff7bd);background-size:300% 300%;animation:sun-clock-sky 18s ease-in-out infinite}
.stand-clock-face.sun-clock:before{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 35% 45%,#fff7bdaa 0%,transparent 42%);animation:sun-clock-drift 14s ease-in-out infinite alternate}
@keyframes sun-clock-sky{0%,100%{background-position:0% 45%}50%{background-position:100% 55%}}
@keyframes sun-clock-drift{from{transform:translate(-10%,-8%) rotate(0deg)}to{transform:translate(12%,10%) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.stand-clock-face.sun-clock,.stand-clock-face.sun-clock:before{animation:none}}

/* Stronger, clearly visible flowing shades in the sun clock background. */
.stand-clock-face.sun-clock{
 background:linear-gradient(115deg,#ff9ac9 0%,#e981bb 18%,#ffbf8b 36%,#ffe3a0 53%,#d99ee9 72%,#ff9ac9 100%);
 background-size:450% 450%;
 animation:sun-clock-vivid-flow 8s linear infinite;
}
.stand-clock-face.sun-clock:before{
 inset:-35%;
 background:radial-gradient(ellipse at 20% 30%,#fff1a0bb 0%,transparent 43%),radial-gradient(ellipse at 75% 70%,#c58aff99 0%,transparent 48%);
 animation:sun-clock-vivid-drift 9s ease-in-out infinite alternate;
}
@keyframes sun-clock-vivid-flow{
 0%{background-position:0% 20%}
 25%{background-position:65% 10%}
 50%{background-position:100% 80%}
 75%{background-position:35% 100%}
 100%{background-position:0% 20%}
}
@keyframes sun-clock-vivid-drift{from{transform:translate(-13%,-10%) rotate(-8deg)}to{transform:translate(15%,13%) rotate(15deg)}}
@media(prefers-reduced-motion:reduce){.stand-clock-face.sun-clock,.stand-clock-face.sun-clock:before{animation:none}}

/* Flip clock: animate contrasting shades derived from the user's ONE selected color. */
.stand-clock-face.flip-clock{
 position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(115deg,
  color-mix(in srgb,var(--flip-clock-color,#16141b) 55%,white),
  var(--flip-clock-color,#16141b),
  color-mix(in srgb,var(--flip-clock-color,#16141b) 70%,black),
  color-mix(in srgb,var(--flip-clock-color,#16141b) 75%,white),
  var(--flip-clock-color,#16141b));
 background-size:400% 400%;
 animation:flip-clock-shades 9s ease-in-out infinite;
}
.stand-clock-face.flip-clock:before{
 content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 35% 35%,color-mix(in srgb,var(--flip-clock-color,#16141b) 38%,white) 0%,transparent 55%);
 animation:flip-clock-light 11s ease-in-out infinite alternate;
}
@keyframes flip-clock-shades{0%,100%{background-position:0% 25%}50%{background-position:100% 75%}}
@keyframes flip-clock-light{from{transform:translate(-14%,-9%)}to{transform:translate(15%,12%)}}
@media(prefers-reduced-motion:reduce){.stand-clock-face.flip-clock,.stand-clock-face.flip-clock:before{animation:none}}

/* Hidden sections must stay hidden regardless of layout styles. */
#homecalendars[hidden],#calendarfilters[hidden]{display:none!important}

/* Persistent unread friend requests and nudges, same visible cue as Chats. */
#quickfriends.has-alert,#quicknudge.has-alert,#people.has-alert{border-color:#ff69b4!important;box-shadow:0 0 0 3px color-mix(in srgb,#ff69b4 30%,transparent),0 0 18px #ff69b4!important;animation:chat-notification-pulse 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#quickfriends.has-alert,#quicknudge.has-alert,#people.has-alert{animation:none}}

/* Keep the message composer visible while long conversations scroll independently. */
#chatcenter #messages{height:clamp(220px,45dvh,520px);min-height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 5px 12px}
#chatcenter #messageform:not([hidden]){position:relative;margin-top:8px}
#peoplepanel .social-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Keep chat composer reachable when entering a conversation on mobile/tablet. */
#chatcenter #messages{max-height:45dvh;min-height:180px}
#chatcenter #messageform{scroll-margin-bottom:24px}

/* Keep the navigation visible when a conversation or settings screen is long. */
@media(min-width:651px){#app:not(.sidebar-collapsed) #plannersidebar{position:sticky;top:0;align-self:flex-start;height:100dvh;overflow-y:auto;overscroll-behavior:contain}}

/* Unread inbox activity is highlighted until the user opens it. */
#notificationitems{display:grid;gap:8px}
#notificationitems .planner-notification{width:100%;text-align:left;border:1px solid #e9b7d5;border-radius:14px;padding:14px 16px;cursor:pointer;color:inherit;font:inherit;background:linear-gradient(110deg,#ffe3f0 0%,#f7eaff 55%,#fff7fc 100%);box-shadow:0 2px 9px #ba639b18}
#notificationitems .planner-notification:hover,#notificationitems .planner-notification:focus-visible{border-color:#cc78aa;box-shadow:0 0 0 2px #d892bd55}

/* Transparent top-right bell and compact dropdown, separate from quick actions. */
header .header-actions{position:relative;display:flex;align-items:flex-start;justify-content:flex-end}
.planner-bell-wrap{position:relative;z-index:25}
#quicknotifications.planner-bell{position:relative;background:transparent;border:0;box-shadow:none;padding:8px 12px;font-size:24px;cursor:pointer;color:inherit}
#quicknotifications .alert-count{position:absolute;top:0;right:0;font-size:11px;min-width:17px;line-height:17px;border-radius:12px}
#notificationinbox:not([hidden]){display:block;position:absolute;top:100%;right:0;width:min(380px,calc(100vw - 28px));max-height:min(65dvh,520px);overflow-y:auto;background:var(--surface,#fff);border:1px solid #e9b7d5;border-radius:16px;padding:16px;box-shadow:0 12px 36px #4b274c30;z-index:40}
#notificationinbox h2{margin:0 0 4px;font-size:19px}
#notificationitems .planner-notification.read{background:transparent;box-shadow:none;border-color:transparent;opacity:.72}
#notificationitems .planner-notification.unread{background:linear-gradient(110deg,#ffe3f0,#f7eaff 55%,#fff7fc)}


/* Chat management controls; scoped to chat so other planner layouts are unchanged. */
#chatcenter .chat-list-filter{max-width:230px}
#conversationlist .chat-conversation-row{display:flex;gap:8px;align-items:stretch;min-width:0}
#conversationlist .chat-conversation-row>button:first-child{flex:1;min-width:0;overflow:hidden}
#conversationlist .chat-conversation-row .chat-archive-action{width:auto;flex:0 0 auto;justify-content:center;align-items:center;min-width:76px;min-height:44px;padding:10px;font-size:12px}
#messages .chat-message-actions{margin-top:8px;font-size:12px}
#messages .chat-message-actions summary{cursor:pointer;min-height:44px;padding:13px 0;list-style-position:inside}
#messages .chat-message-actions>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#messages .chat-message-actions button{min-height:44px;max-width:100%;white-space:normal;padding:8px 10px;background:#fff;color:#34343e;font-size:12px;border:1px solid #ddd5e8}
#messages .chat-message-actions button:disabled,#conversationlist .chat-archive-action:disabled{opacity:.6;cursor:wait}
#chatcenter #chatactionstatus{overflow-wrap:anywhere}
@media(max-width:650px){#conversationlist .chat-conversation-row{gap:6px}#conversationlist .chat-conversation-row>button:first-child{padding:12px}#messages .chat-message-actions summary{min-height:44px;padding:13px 0}#messages .chat-message-actions>div{flex-direction:column;align-items:stretch}}