/* v3.19 cross-generation interface differentiation */
body.mode-balanced{--generation-density:1}
body.mode-compact{--generation-density:.86}
body.mode-clear{--generation-density:1.18;--font-size:20px}

/* Compact: fast, information-dense, fewer explanatory lines. */
body.mode-compact .content{padding:12px 12px 24px}
body.mode-compact .topbar{min-height:58px;padding:8px 12px}
body.mode-compact .brand-subtitle,body.mode-compact .page-heading p,body.mode-compact .today-hero p,body.mode-compact .today-footer-note{display:none}
body.mode-compact .section-head{margin-top:14px}
body.mode-compact .card,body.mode-compact .membership-card,body.mode-compact .profile-card{padding:12px;border-radius:16px}
body.mode-compact .btn{min-height:38px;padding:8px 12px}
body.mode-compact .bottom-nav{padding-top:4px}
body.mode-compact .nav-btn{min-height:49px}

/* Clear: senior-oriented interface, large type, large hit areas, less secondary visual noise. */
body.mode-clear{line-height:1.65}
body.mode-clear .app-shell{max-width:720px;padding-bottom:calc(116px + env(safe-area-inset-bottom))}
body.mode-clear .content{padding:22px 20px 42px}
body.mode-clear .topbar{min-height:78px;padding:14px 18px;background:#f6f1e7;backdrop-filter:none;-webkit-backdrop-filter:none}
body.mode-clear .brand-mark{width:50px;height:50px}
body.mode-clear .brand-title{font-size:22px;line-height:1.2}
body.mode-clear .brand-subtitle{display:none}
body.mode-clear .role-chip{min-height:52px;padding:0 15px;font-size:16px}
body.mode-clear .icon-btn,body.mode-clear .profile-mini{width:52px;height:52px;font-size:18px}
body.mode-clear .content h1,body.mode-clear .today-hero h1{font-size:38px;line-height:1.18;margin-bottom:10px}
body.mode-clear .content h2{font-size:25px;line-height:1.35}
body.mode-clear .content h3{font-size:21px}
body.mode-clear p,body.mode-clear .page-heading p,body.mode-clear .today-hero p{font-size:18px;line-height:1.75}
body.mode-clear small{font-size:15px;line-height:1.5}
body.mode-clear .section-kicker,body.mode-clear .eyebrow{display:none}
body.mode-clear .btn,body.mode-clear button.tab,body.mode-clear .text-btn{font-size:18px;min-height:54px;border-radius:16px;padding:13px 18px}
body.mode-clear input,body.mode-clear select,body.mode-clear textarea{font-size:20px;min-height:54px}
body.mode-clear .card,body.mode-clear .profile-card,body.mode-clear .membership-card,body.mode-clear .coach-message,body.mode-clear .water-card{border-radius:22px;padding:19px}
body.mode-clear .soft-count,body.mode-clear .status-pill{font-size:14px;padding:7px 10px}
body.mode-clear .goal-card{grid-template-columns:auto minmax(0,1fr);padding:17px;gap:14px}
body.mode-clear .goal-card .mini-btn{grid-column:1/-1;width:100%}
body.mode-clear .goal-check{width:44px;height:44px;font-size:20px}
body.mode-clear .goal-copy strong{font-size:19px}
body.mode-clear .goal-copy small,body.mode-clear .goal-source{font-size:15px}
body.mode-clear .habit-grid{grid-template-columns:1fr}
body.mode-clear .habit-card{min-height:104px;padding:18px}
body.mode-clear .habit-card strong{font-size:20px}
body.mode-clear .habit-card small{font-size:16px}
body.mode-clear .meal-photo-grid{grid-template-columns:1fr}
body.mode-clear .meal-photo-card{grid-template-columns:145px 1fr;min-height:145px}
body.mode-clear .meal-photo-copy{padding:16px}
body.mode-clear .meal-photo-copy strong{font-size:21px}
body.mode-clear .meal-photo-copy small,body.mode-clear .meal-photo-copy span{font-size:16px;white-space:normal}
body.mode-clear .wide-add-meal{min-height:72px;font-size:18px}
body.mode-clear .water-card{align-items:stretch;flex-direction:column}
body.mode-clear .water-card h2{font-size:25px}
body.mode-clear .water-card p{font-size:17px}
body.mode-clear .water-action{justify-content:space-between}
body.mode-clear .water-ring{width:78px;height:78px}
body.mode-clear .water-ring span{font-size:14px}
body.mode-clear #app>.bottom-nav{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:100%;max-width:720px;margin:0 auto;padding:9px 6px calc(10px + env(safe-area-inset-bottom));background:#fffdf7;backdrop-filter:none;-webkit-backdrop-filter:none;contain:layout paint;box-shadow:0 -8px 22px rgba(78,68,50,.08)}
body.mode-clear .nav-btn{min-height:72px;font-size:15px;gap:5px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.mode-clear .nav-icon{font-size:27px}
body.mode-clear .mode-options{grid-template-columns:1fr}
body.mode-clear .mode-option{padding:16px}
body.mode-clear .mode-option strong{font-size:19px}
body.mode-clear .mode-option small{font-size:15px;margin-top:5px}
body.mode-clear .wt-guide-launcher{right:14px;bottom:calc(118px + env(safe-area-inset-bottom));min-width:68px;padding:10px 12px}
body.mode-clear .wt-guide-launcher span{font-size:20px}
body.mode-clear .wt-guide-launcher small{font-size:13px}

/* In clear mode, keep essential health/communication functions prominent and reduce decorative/advanced panels. */
body.mode-clear .challenge-card,body.mode-clear .today-footer-note,body.mode-clear .chip-row{display:none}
body.mode-clear .collection-preview,body.mode-clear .campaign-card{display:none}
body.mode-clear .profile-links{grid-template-columns:1fr}
body.mode-clear .profile-links button{min-height:60px;font-size:18px;text-align:left;padding:14px 16px}

.elder-quick-panel{display:none}
body.mode-clear .elder-quick-panel{display:block;margin:2px 0 22px;padding:18px;border:2px solid #cedbd3;border-radius:24px;background:#fffdf8;box-shadow:0 8px 20px rgba(70,85,76,.06)}
.elder-quick-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.elder-quick-title strong{font-size:25px}
.elder-quick-title small{font-size:16px;color:#68766f}
.elder-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.elder-quick-grid button{min-height:94px;border:1px solid #ccd9d1;border-radius:19px;background:#f5f8f5;color:#31443a;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:14px 16px;gap:1px 10px;touch-action:manipulation}
.elder-quick-grid button>span{grid-row:1/3;font-size:31px;text-align:center}
.elder-quick-grid button>strong{font-size:20px;line-height:1.25}
.elder-quick-grid button>small{font-size:15px;color:#66756e}

@media(max-width:480px){body.mode-clear .content{padding-left:14px;padding-right:14px}.elder-quick-grid{grid-template-columns:1fr}.elder-quick-grid button{min-height:82px}body.mode-clear .meal-photo-card{grid-template-columns:120px 1fr}body.mode-clear .wt-guide-launcher{right:10px;bottom:calc(116px + env(safe-area-inset-bottom))}}