/* Dashboard direction inspired by the reference: neutral chrome, compact cards, data color only. */
:root{--dash-ink:#202b30;--dash-muted:#69757a;--dash-line:#dfe4e6;--dash-soft:#f5f7f7;--dash-teal:#328e8a;color:var(--dash-ink);background:#fff}
body,.shell{background:#fff;color:var(--dash-ink)}
body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
.site-brand,.site-footer span:first-child,.intro h1,.screen-heading h1,.section-heading h2,.dialog-head h2,
.glance-goal h2,.daily-metrics .glance h2,.goal h3,.profile-overview h2,.profile-highlights h2,
.profile-badges h2,.friends-home h2,.friends-panel h2,.badge-card h2,.quick-links h2,.more-heading,
.year-overview summary,.goal-grid-heading strong{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;font-weight:650;letter-spacing:-.035em;color:var(--dash-ink)}
.eyebrow,.intro .eyebrow,.daily-metrics .eyebrow,.daily-metrics .glance-plan .eyebrow,
.daily-metrics .glance-recent .eyebrow{color:#79858a;font-size:10px;font-weight:700;letter-spacing:.1em}
.site-brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.03em}
.brand-icon{background:#1f292e;color:#fff;border-radius:50%;width:34px;height:34px;font-size:22px}
.nav-group{color:#8a9498;font-size:10px;font-weight:700;letter-spacing:.1em;margin:0 12px 9px}
.sidebar-caption{font-size:12px;color:#849094;margin:auto 12px 0;padding-top:20px;line-height:1.5}
.nav-symbol{display:inline-grid;place-items:center;width:21px;flex:none;font-size:19px;line-height:1;font-weight:400;color:#69767a}
.utility-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px;padding:11px 28px;margin:0 -28px 26px;border-bottom:1px solid var(--dash-line);background:#fff;z-index:4}
.utility-bar>span{color:#69757a;font-size:11px;letter-spacing:.11em;font-weight:700}
.utility-bar .header-log{padding:10px 17px;min-height:42px;border-radius:8px;font-size:13px;white-space:nowrap;background:#24343a;color:#fff;width:auto;margin:0;box-shadow:none}
.utility-bar .header-log:hover{background:#365158}
.primary,.header-log,.feature-action,.save-button{background:#24343a;color:#fff}
.primary:hover,.header-log:hover,.feature-action:hover,.save-button:hover{background:#365158}
.secondary,#screen-goals #open-goal{background:#eef6f5;color:#176f6d;border:1px solid #c8e4e1}
.secondary:hover,#screen-goals #open-goal:hover{background:#dff0ee}
.outline{border-color:#cfd8da;color:#2d4f53}
.outline:hover{background:#f5f8f8}
.text-button{color:#257977}
.app-nav button,.app-nav button.selected{font-family:inherit;color:#48555b;border-radius:7px;background:transparent}
.app-nav button.selected{background:#e9ecee;color:#202b30;font-weight:700}
.app-nav button.selected .nav-symbol{color:#24343a}
.app-nav button:hover{background:#f1f3f4;color:#202b30}
.intro{margin:0 0 18px}.intro h1{font-size:clamp(28px,2.7vw,36px);letter-spacing:-.045em;margin:3px 0 0}
.intro-subtitle{font-size:14px!important;color:var(--dash-muted)!important;margin-top:5px!important}
.card,.home-actions,.companion-area,.quick-links,.daily-metrics>.glance,.daily-stat,
.calendar-card,.mix-card,.year-overview,.goals-card,.pattern-card,.more-grid .card,
.profile-overview,.profile-highlights,.profile-badges,.account-panel,.friends-panel,.friends-home,
.badge-card{background:#fff;border:1px solid var(--dash-line);border-radius:11px;box-shadow:none}
.home-stage{gap:14px;grid-template-columns:minmax(0,1.35fr) minmax(290px,.85fr)}
.home-actions{padding:19px 20px}
.home-actions .week-strip{background:#fff;border:0;padding:0;gap:7px}
.home-actions .week-day{border:1px solid #e5e9e9;background:#f8f9f9;color:#3f4d53;border-radius:8px;min-height:77px}
.home-actions .week-day.today{box-shadow:inset 0 0 0 1px #2f827f;border-color:#2f827f;background:#eef7f6;color:#176c69}
.home-actions .week-day.today:not(.done){outline:0;box-shadow:inset 0 0 0 1px #328e8a;border-color:#328e8a;background:#eef7f6;color:#176c69}
.home-actions .week-day .mini-face{background:#edf3f3;color:#69777c}
.home-actions .week-day.done{background:#328e8a;color:#fff}
.home-actions .week-day.done .mini-face{background:#eaf5f3;color:#295e5b}
.week-day.done.today{outline-color:#2f827f}.week-day.has-plan:not(.done){outline-color:#77aca9}
.home-actions .feature-action{background:#24343a;box-shadow:none;border-radius:8px;min-height:70px}
.home-actions .feature-action:hover{background:#365158}
.home-actions .feature-plus{color:#24343a;border-radius:7px}
.companion-area{padding:18px 19px;gap:11px}
.simple-sprite{background:#358e89}
.companion-area .simple-sprite{background:#358e89}
.glance-goal h2{font-size:19px;line-height:1.2;margin:3px 0}
.glance-goal .progress-track{background:#e7eeee;height:7px}
.glance-goal .progress-track div,.progress-track div{background:#328e8a}
.glance-goal .hero-progress-label,.glance-goal .hero-encouragement{color:#637277}
.action-pill,.glance-goal #glance-goal-action{border:1px solid #cbd7d8;background:#fff;color:#276f6d;border-radius:7px;font-weight:650}
.action-pill:hover,.glance-goal #glance-goal-action:hover{background:#f3f8f8;border-color:#80b6b3}
.quick-links{margin:14px 0 0;padding:16px 18px}
.quick-links h2{font-size:17px;margin:3px 0 0}.quick-links-head{display:block;margin-bottom:12px}
.quick-links-grid button{border-color:#e1e6e7;border-radius:7px;background:#fff;color:#35454b;min-height:41px}
.quick-links-grid button span{color:#358e89}.quick-links-grid button:hover{background:#f4f8f8;border-color:#a3cbca;color:#225d5b}
.daily-metrics{gap:14px;margin:14px 0 0}
.daily-metrics>.glance,.daily-stat{padding:18px;min-height:144px}
.daily-metrics .glance h2{font-size:19px;color:var(--dash-ink)}
.daily-stat .stat strong{font-size:28px;color:var(--dash-ink)}
.daily-metrics .glance p:not(.eyebrow),.goal-link #goal-spotlight span,.daily-stat .stat span{color:var(--dash-muted)}
.daily-metrics .glance-plan h2,.daily-metrics .glance-recent h2,
.daily-metrics .glance-plan .eyebrow,.daily-metrics .glance-recent .eyebrow{color:inherit}
.daily-metrics .glance-plan .eyebrow,.daily-metrics .glance-recent .eyebrow{color:#79858a}
.daily-metrics>.goal-link #goal-spotlight strong{color:var(--dash-ink)}
#screen-goals,#screen-calendar{border-color:var(--dash-line);margin-top:33px;padding-top:25px}
.screen-heading h1{font-size:26px}.section-heading h2{font-size:17px}.dialog-head h2{font-size:21px}
.calendar-card .day:hover{background:#f3f8f8!important}
.calendar-card .day.selected{outline-color:#328e8a}
.calendar-card .day-detail{background:#f4f8f8;color:#4b5a60}
.calendar-nav button{background:#fff;border-color:#dce3e4;color:#263e43}
.year-overview summary:after{color:#328e8a}
.year-cell,.goal-cube,.cube-scale i{background:#eaf0f0}
.goal-cube.before,.goal-cube.future{background:#f4f7f7}.goal-cube.missed{background:#dfeaea}
.goal-cube.current{background:#add5d2;box-shadow:inset 0 0 0 2px #328e8a}.goal-cube.met,.cube-scale i:nth-of-type(3){background:#328e8a}
.goal-cube.current,.year-cell.today{outline-color:#328e8a}
.goal-grid-wrap,.goal-grid-wrap.compact{border-color:var(--dash-line);border-radius:10px;background:#fff}
.more-heading{font-size:21px}.more-grid .card{background:#fff}
.empty{background:#f5f7f7;color:#647277;border-radius:8px}
.goals-card,.calendar-card,.mix-card,.pattern-card{background:#fff}
.badge-card h2{font-size:17px}.profile-avatar,.friend-avatar{background:#e5f2f0;color:#227874}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,
.button:focus-visible,.feature-action:focus-visible,.action-pill:focus-visible,.app-nav button:focus-visible{outline:3px solid #318e88;outline-offset:2px}
@media(min-width:901px){
  .shell{grid-template-columns:246px minmax(0,1fr)}
  .site-header{padding:20px 10px;border-right:1px solid var(--dash-line)}
  .site-brand{margin:0 8px 34px}
  .nav-group{order:1}
  .app-nav{order:2;gap:3px}
  .app-nav button{display:flex;align-items:center;gap:10px;padding:9px 12px;min-height:38px;text-align:left;font-size:13px}
  .sidebar-caption{order:3}
  main{width:min(100%,1510px);padding:0 clamp(22px,2.6vw,42px) 68px}
  .utility-bar{position:sticky;top:0;margin:0 calc(-1 * clamp(22px,2.6vw,42px)) 26px;padding:12px clamp(22px,2.6vw,42px)}
  .site-footer{padding:20px clamp(22px,2.6vw,42px)}
  #screen-home,#screen-goals,#screen-calendar{scroll-margin-top:86px}
}
@media(min-width:901px) and (max-width:1170px){.home-stage{grid-template-columns:1fr}}
@media(max-width:900px){
  .site-header{border-bottom-color:var(--dash-line);padding:12px 18px}
  .nav-group,.sidebar-caption{display:none}
  .nav-symbol{display:none}
  .app-nav{border-top-color:var(--dash-line)}
  .utility-bar{margin:0 -22px 20px;padding:11px 22px}
  main{padding:0 22px 55px}
  .home-stage{grid-template-columns:1fr}
}
@media(max-width:740px){
  .site-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px 0;flex-wrap:wrap}
  .site-brand{margin:0 0 9px;font-size:18px}.brand-icon{width:30px;height:30px;font-size:19px}
  .app-nav{order:2;flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px 0 8px;margin:0;border-top:1px solid var(--dash-line)}
  .app-nav button{font-size:11px;min-height:33px;padding:7px 2px}
  main{padding:0 16px 48px}.utility-bar{margin:0 -16px 18px;padding:8px 16px;min-height:52px}
  .utility-bar>span{font-size:10px}.utility-bar .header-log{min-height:38px;font-size:12px}
  .intro h1{font-size:29px}.intro{margin-bottom:15px}
  .home-actions{padding:15px}.home-actions .week-day{min-height:68px}
  .companion-area{padding:15px}.glance-goal h2{font-size:19px}
  .quick-links{padding:14px}.quick-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calendar-card .day{min-height:56px}
  #screen-home,#screen-goals,#screen-calendar{scroll-margin-top:119px}
}
.recovery-value{padding:14px;border:1px solid var(--dash-line);border-radius:8px;background:#f5f7f7;font:600 15px ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;user-select:all}
#reset-form{display:grid;gap:12px}
#reset-status:not(:empty){color:#9b394c}
.shared-goal-panel{margin-top:16px}
.shared-goal-form{display:grid;grid-template-columns:minmax(160px,1fr) 130px auto;align-items:end;gap:10px;margin:16px 0}
.shared-goal-item{border-top:1px solid var(--dash-line);padding:14px 0}
.shared-goal-item p,.shared-home-summary{font-size:13px;color:#53676e}
.shared-goal-actions{display:flex;gap:8px;flex-wrap:wrap}
.shared-goal-actions button{min-height:38px;padding:7px 12px;border:1px solid #cfd8da;border-radius:8px;background:#fff;color:#2f4d52;font-weight:650}
.shared-goal-actions button:hover{background:#f3f7f7}
.shared-home-summary{border-top:1px solid var(--dash-line);padding-top:11px}
@media(max-width:740px){.shared-goal-form{grid-template-columns:1fr 1fr}.shared-goal-form label:first-child{grid-column:1/-1}.shared-goal-form button{grid-column:1/-1}}
/* Keep the requested calendar in view even when earlier styles assign grid rows. */
@media(max-width:1170px){
  #screen-calendar{display:flex;flex-direction:column}
  #screen-calendar>.screen-heading{order:0}
  #screen-calendar>.calendar-card{order:1}
  #screen-calendar>.year-overview{order:2}
  #screen-calendar>.mix-card{order:3}
  #screen-calendar>.pattern-card{order:4}
}
dialog{background:#fff;color:var(--dash-ink);border:1px solid var(--dash-line);border-radius:12px;box-shadow:0 20px 60px #202b3029}
dialog::backdrop{background:#202b3080}
dialog .icon-button{background:#f2f5f5;color:#34474c;border-radius:8px}
dialog .preference-choices{border-color:var(--dash-line);border-radius:9px}
dialog label{color:#46565c}
dialog input,dialog select,dialog textarea{color:var(--dash-ink);border-color:#cfd8da;border-radius:8px}
.preference-extra{margin:12px 0;border:1px solid var(--dash-line);border-radius:9px;padding:12px}
.preference-extra>summary{cursor:pointer;font-size:14px;font-weight:650;color:#2d4f53}
.preference-extra[open]>summary{margin-bottom:8px}
.preference-extra .preference-choices{margin:0;border:0;padding:8px 0 0}
.goal-start-note{color:#53676e;font-size:12px;line-height:1.5;margin:8px 0}
.companion-area{display:block;padding:19px}
.companion-art{display:none!important}
.companion-area .glance-goal{display:block;grid-column:auto;grid-row:auto}
.home-actions .week-day b{margin:5px auto 0}
.home-actions button.week-day{width:100%;font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}
.home-actions button.week-day:hover{background:#edf5f4;border-color:#328e8a}
.home-actions button.week-day:focus-visible{outline:3px solid #328e8a;outline-offset:2px}
.home-actions .week-day.future{opacity:.55}
.day-workouts{display:grid;gap:12px;max-height:min(55vh,520px);overflow-y:auto;margin:18px 0}
.day-workout{border:1px solid var(--dash-line);border-radius:10px;padding:14px 16px;background:#fff}
.day-workout h3{margin:0 0 8px;font-size:16px;color:var(--dash-ink)}
.day-workout p{margin:6px 0;color:#51636a;font-size:13px;line-height:1.5}
.day-workout .day-note{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dash-ink)}
.day-workout-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.day-workout-actions button{min-height:40px;padding:8px 12px;border:1px solid #cfd8da;border-radius:8px;background:#fff;color:#2d4f53;font-weight:650}
.day-workout-actions button:hover{background:#f3f8f8}
.day-workout-actions button:last-child{border-color:#e6c7cc;color:#9b394c}
#day-dialog .dialog-actions{border-top:1px solid var(--dash-line);padding-top:14px}
#day-dialog #day-add{background:#24343a;color:#fff}
#day-dialog #day-add:hover{background:#365158}
/* Editorial UI: reserve color for activity identity and meaningful progress. */
.site-brand{gap:0;color:var(--dash-ink)}
.home-actions .week-strip{gap:6px}
.home-actions .week-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:73px;padding:7px 1px;border:1px solid var(--dash-line);background:#fff;color:#35454b}
.home-actions .week-day span{line-height:1.1}
.home-actions .week-day b{margin:1px 0;font-size:18px;line-height:1.2}
.home-actions .week-day .week-status{font-size:9px;font-weight:600;letter-spacing:0;text-transform:none;color:#68777b;white-space:nowrap}
.home-actions .week-day.done{background:#eff7f5;border-color:#bddbd6;color:#225d59}
.home-actions .week-day.done b,.home-actions .week-day.done span{color:#225d59}
.home-actions .week-day.done .week-status{color:#225d59}
.home-actions .week-day.has-plan:not(.done){background:#f8fafb;border-color:#cbd7dc}
.home-actions .week-day.future{opacity:.6}
.home-actions .feature-action{display:flex;align-items:center;justify-content:flex-start;text-align:left;border-radius:8px;box-shadow:none;padding:14px 18px;gap:0}
.home-actions .feature-action strong{font-size:18px;line-height:1.25}
.home-actions .feature-action small{display:block;margin-top:2px;color:#d9e4e6;font-size:12px}
.quick-links-grid button{justify-content:flex-start;font-weight:600;color:#314249}
.daily-metrics .action-pill,.glance-goal #glance-goal-action,
.goal-actions button,.history-actions button,.plan-actions button,
.friend-card button,.request-line button,.friend-actions button,
.profile-badges #view-badges,.friends-home #friends-home-link,.friends-panel #copy-invite{
  background:#fff;border:1px solid #cfd8da;color:#2f4d52;border-radius:8px;box-shadow:none;font-family:inherit;font-weight:650
}
.daily-metrics .action-pill:hover,.glance-goal #glance-goal-action:hover,
.goal-actions button:hover,.history-actions button:hover,.plan-actions button:hover,
.friend-card button:hover,.request-line button:hover,.friend-actions button:hover{background:#f3f7f7;border-color:#a8c0c2}
.goal-actions button:last-child,.history-actions button:last-child,.plan-actions button:last-child,
.friend-actions button:last-child{border-color:#e6c7cc;color:#9b394c}
#screen-goals #open-goal,.button.secondary{background:#edf5f4;border-color:#cbdedb;color:#225d59}
#screen-goals #open-goal:hover,.button.secondary:hover{background:#e2f0ee}
.button.primary,dialog .button.primary,.toast{background:#24343a;color:#fff;box-shadow:none}
.button.primary:hover,dialog .button.primary:hover{background:#365158}
.choice-grid label{background:#f5f7f7;color:#34474c;border:1px solid #e4e9e9}
.choice-grid input{accent-color:#328e8a}
.friend-profile,.goal-evidence,.goal-next,.shortcut{background:#f6f8f8;color:#45565d;border-radius:8px}
.goal-win,.goal-progress strong{color:#246f69}
.calendar-card .day:hover{background:#f3f8f8!important}
.calendar-card .day-detail{background:#f5f8f8;color:#45565d}
.badge-card{min-height:0;padding:17px 20px;border:1px solid var(--dash-line);background:#fff}
.badge-card h2{font-size:16px;color:var(--dash-ink)}
.badge-card p{color:var(--dash-muted)}
.badge-card .badge-status{font-size:12px;font-weight:650;color:#607076}
.badge-card.earned{border-color:#cbdedb}
.badge-card.earned .badge-status{color:#225d59}
.profile-badge{border-color:var(--dash-line);border-radius:7px;background:#f7f9f9;color:var(--dash-ink)}
dialog .dialog-intro,dialog .fine-print{color:#66767b}
dialog .details summary,dialog .text-button{color:#246f69}
@media(max-width:740px){.home-actions .week-day{min-height:65px}.home-actions .week-day b{font-size:15px}.home-actions .week-day .week-status{font-size:8px}}
/* Data has color; controls and surfaces do not carry decorative illustrations. */
.calendar-card .day-bubble.logged{background:var(--day-fill);border:1px solid #ffffff55;border-radius:7px}
.calendar-card .day-bubble.pending{border:1px solid #a6b5ba;background:#fff;border-radius:7px}
.calendar-card .day-bubble.blank{background:transparent}
.calendar-card .day-bubble{width:min(100%,35px);aspect-ratio:1;box-shadow:none}
.calendar-card .day{border:1px solid transparent;border-radius:8px}
.calendar-card .day.selected{outline:2px solid #328e8a}
.calendar-card .day-number{color:#47575c}
.calendar-card .day.today .day-number{font-weight:750;color:#225d59}
.calendar-card .day-detail{border-radius:8px}
.badge-summary{color:#45565d;font-weight:650}
.friend-profile{background:#f6f8f8;border:1px solid var(--dash-line);border-radius:9px}
.auth-mode input,.import-guest input{accent-color:#328e8a}
.goal-grid-wrap,.goal-grid-wrap.compact{box-shadow:none}
.glance-goal .hero-encouragement{font-size:12px!important;color:#53676e}
dialog .dialog-actions .button{border-radius:8px}
@media(max-width:740px){.calendar-card .day-bubble{width:min(100%,30px)}}
/* Calendar is a compact planning grid, not a gallery of illustrated dates. */
.calendar-card .calendar-labels{gap:0;margin:14px 0 7px;text-align:left;color:#6b787d}
.calendar-card .calendar-labels span{padding-left:10px}
.calendar-card .calendar-grid{gap:0;border-top:1px solid #e0e6e7;border-left:1px solid #e0e6e7}
.calendar-card .calendar-empty{min-height:70px;border-right:1px solid #e0e6e7;border-bottom:1px solid #e0e6e7;background:#fafbfb}
.calendar-card .day{align-items:flex-start;justify-content:space-between;min-height:70px;padding:9px 10px;border:0;border-right:1px solid #e0e6e7;border-bottom:1px solid #e0e6e7;border-radius:0;background:#fff!important;text-align:left;gap:3px}
.calendar-card .day:hover{background:#f1f6f5!important}
.calendar-card .day.selected{outline:0;box-shadow:inset 0 0 0 2px #328e8a;background:#f4f9f8!important}
.calendar-card .day.today:not(.selected){box-shadow:inset 0 0 0 1px #b8d6d2}
.calendar-card .day-number{font-size:13px;font-weight:600;color:#415158}
.calendar-card .day-bubble{width:26px;height:9px;aspect-ratio:auto;flex:none;border-radius:3px}
.calendar-card .day-bubble.logged{border:0;border-radius:3px}
.calendar-card .day-bubble.pending{border:1px solid #98aab0;border-radius:3px;background:#fff}
.calendar-card .legend-dot,.calendar-card .legend-plan{border-radius:2px}
@media(max-width:740px){
  .calendar-card .calendar-labels span{padding-left:5px}
  .calendar-card .calendar-empty,.calendar-card .day{min-height:56px}
  .calendar-card .day{padding:6px 5px}
  .calendar-card .day-bubble{width:20px;height:7px}
}