@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#f3f6fc;--surface:#fff;--surface2:#e8eef9;--ink:#19263d;--muted:#52627b;--line:#d6dfef;--green:#234b91;--green2:#285bb0;--mint:#dce8ff;--accent:#d7a85e;--danger:#a63c36;--shadow:0 12px 34px rgba(25,49,90,.08);font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;color:var(--ink);color-scheme:light;background:var(--bg);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e0b66d;outline-offset:2px}.app-header{max-width:980px;margin:0 auto;padding:28px 22px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}.app-header h1{font-family:Manrope,sans-serif;font-size:clamp(1.6rem,4vw,2.15rem);margin:4px 0 5px;letter-spacing:-.05em}.eyebrow{font-size:.68rem;letter-spacing:.16em;font-weight:700;color:var(--green2);margin:0 0 7px}.muted{color:var(--muted);font-size:.9rem;line-height:1.55}.app-header .muted{margin:0}.icon-button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;width:44px;height:44px;font-size:1.3rem;flex-shrink:0}.app-shell{max-width:980px;margin:0 auto;padding:0 22px 28px}.welcome-card{background:linear-gradient(120deg,#234b91,#376cc4);color:#fff;border-radius:24px;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow);overflow:hidden;position:relative}.welcome-card:after{content:"";position:absolute;width:210px;height:210px;border:1px solid #ffffff20;border-radius:50%;right:65px;top:-120px;box-shadow:0 0 0 24px #ffffff08,0 0 0 50px #ffffff06}.welcome-copy{position:relative;z-index:1}.eyebrow.light{color:#d5e5ff}.welcome-card h2{font:800 clamp(1.3rem,4vw,2rem) Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 7px}.welcome-card p:last-child{margin:0;color:#e5efff;font-size:.9rem}.date-bubble{z-index:1;width:86px;height:86px;border-radius:50%;background:#ffffff15;border:1px solid #ffffff35;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0}.date-bubble span{font:800 1.75rem Manrope,sans-serif}.date-bubble small{font-size:.7rem;color:#d5e5ff}.tabs{display:flex;gap:5px;background:var(--surface);padding:6px;border:1px solid var(--line);border-radius:16px;margin:22px 0 28px;overflow-x:auto}.tab{flex:1;border:0;background:transparent;border-radius:11px;padding:12px 14px;color:var(--muted);font-weight:700;white-space:nowrap}.tab.active{background:var(--green);color:#fff}.view{animation:fadeIn .18s ease}@keyframes fadeIn{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}.hidden{display:none!important}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px}.section-heading h2,.section-heading h3{font-family:Manrope,sans-serif;letter-spacing:-.04em;margin:0;font-size:1.45rem}.section-heading h3{font-size:1.12rem}.section-heading.compact{margin:28px 0 13px}.primary-button,.secondary-button,.danger-button{border:0;border-radius:12px;padding:12px 16px;font-weight:700;font-size:.88rem}.primary-button{background:var(--green);color:white}.primary-button:hover{background:var(--green2)}.secondary-button{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}.danger-button{background:#fff0ee;color:var(--danger);border:1px solid #f1d0cc}.text-button,.quiet-button{background:transparent;border:0;color:var(--green2);font-weight:700;padding:8px}.weather-banner{display:flex;align-items:center;gap:13px;background:#fff4db;border:1px solid #f0d8a5;border-radius:15px;padding:14px 15px;margin-bottom:18px;color:#6b4a12}.weather-icon{font-size:1.5rem}.weather-banner p{margin:3px 0 0;font-size:.82rem;line-height:1.4}.weather-banner .quiet-button{margin-left:auto;color:#6b4a12;font-size:1.3rem}.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.summary-card{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:16px}.summary-icon{display:grid;place-items:center;background:var(--mint);color:var(--green);width:42px;height:42px;border-radius:13px;font-size:1.2rem}.summary-card div{display:flex;flex-direction:column;gap:2px}.summary-card strong{font:800 1.45rem Manrope,sans-serif}.summary-card span:not(.summary-icon){font-size:.78rem;color:var(--muted)}.progress-track{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:20px}.progress-fill{height:100%;width:0;background:var(--green2);border-radius:99px;transition:width .25s}.progress-caption{font-size:.78rem;color:var(--muted);margin:8px 0 24px}.task-list{display:flex;flex-direction:column;gap:9px}.task-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px 15px;display:flex;align-items:flex-start;gap:12px;box-shadow:0 2px 6px #243f7010}.task-check{appearance:none;flex-shrink:0;width:22px;height:22px;border:1.7px solid #8c9bb5;border-radius:7px;margin:2px 0 0;display:grid;place-items:center;background:var(--surface)}.task-check:checked{background:var(--green2);border-color:var(--green2)}.task-check:checked:after{content:"✓";color:#fff;font-size:14px;font-weight:700}.task-main{min-width:0;flex:1}.task-title{font-weight:700;line-height:1.35;overflow-wrap:anywhere}.task-card.completed .task-title{text-decoration:line-through;color:var(--muted)}.task-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px;align-items:center}.category-tag,.time-tag,.date-tag{font-size:.68rem;font-weight:700;border-radius:7px;padding:4px 7px;background:var(--surface2);color:var(--muted)}.time-tag{background:#e5efff;color:var(--green)}.task-notes{font-size:.82rem;color:var(--muted);margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.task-actions{display:flex;gap:2px;margin-left:auto}.task-action{border:0;background:transparent;color:var(--muted);padding:4px 6px;font-size:1rem;border-radius:7px}.task-action:hover{background:var(--surface2);color:var(--ink)}.empty-state{text-align:center;padding:28px 18px;background:var(--surface);border:1px dashed var(--line);border-radius:17px;color:var(--muted)}.empty-state>span{font-size:1.8rem}.empty-state strong{display:block;color:var(--ink);margin:8px 0 4px}.empty-state p{font-size:.85rem;margin:0}.intro{margin-top:-5px;margin-bottom:19px}.filter-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;margin-bottom:9px}.filter-chip{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:9px 12px;font-size:.78rem;font-weight:700;color:var(--muted)}.filter-chip.selected{background:var(--mint);border-color:#adc4ed;color:var(--green)}.weekly-card{background:var(--green);color:white;border-radius:20px;padding:24px;margin-bottom:14px}.weekly-card h3{font:800 1.9rem Manrope,sans-serif;margin:0 0 8px;letter-spacing:-.04em}.weekly-card>p:not(.eyebrow){color:#e0ebff;font-size:.87rem;line-height:1.5;margin:0;max-width:520px}.progress-track.pale{background:#ffffff2b;margin-top:19px}.pale .progress-fill{background:#bed6ff}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:15px;display:flex;flex-direction:column;gap:6px}.stat-card span{font-size:.78rem;color:var(--muted)}.stat-card strong{font:800 1.5rem Manrope,sans-serif}.category-progress{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px}.category-line-head{display:flex;justify-content:space-between;gap:10px;font-size:.83rem;margin-bottom:7px}.category-line-head span:last-child{color:var(--muted)}.category-track{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}.category-track div{height:100%;background:var(--green2);border-radius:99px}.footnote{font-size:.8rem;margin-top:16px}.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:19px;margin-bottom:13px}.settings-card h3{font:800 1.05rem Manrope,sans-serif;margin:0 0 6px}.settings-card>.muted{margin:0 0 15px}.routine-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.88rem}.routine-line strong{font-size:.82rem;white-space:nowrap}.setting-toggle{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.setting-toggle:last-child{border-bottom:0}.setting-toggle span{display:flex;flex-direction:column;gap:4px}.setting-toggle strong{font-size:.88rem}.setting-toggle small{font-size:.78rem;color:var(--muted);line-height:1.4}.setting-toggle input{appearance:none;width:42px;height:25px;border-radius:99px;background:#a7b4cb;position:relative;flex-shrink:0;transition:background .2s}.setting-toggle input:before{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0002}.setting-toggle input:checked{background:var(--green2)}.setting-toggle input:checked:before{transform:translateX(17px)}.button-stack{display:flex;flex-wrap:wrap;gap:9px}.file-button{display:inline-flex;align-items:center;cursor:pointer}.status-line{font-size:.8rem;color:var(--green2);margin-bottom:0}.app-footer{max-width:980px;margin:0 auto;padding:10px 22px 30px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.72rem}.task-dialog{border:1px solid var(--line);padding:24px;border-radius:22px;background:var(--surface);color:var(--ink);width:min(92vw,480px);max-height:90vh;overflow:auto;box-shadow:0 24px 80px #102b5040}.task-dialog::backdrop{background:#14253db3;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.dialog-heading h2{font:800 1.4rem Manrope,sans-serif;letter-spacing:-.04em;margin:0}.field-label{display:block;font-size:.8rem;font-weight:700;margin:15px 0 7px}.field-input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:11px;padding:12px;font-size:.9rem}.field-input:focus{border-color:var(--green2)}textarea.field-input{resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1c3154;color:white;border-radius:12px;padding:12px 17px;font-size:.85rem;box-shadow:var(--shadow);transition:all .2s;z-index:20;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
body.dark{color-scheme:dark;--bg:#101827;--surface:#1b273b;--surface2:#26364f;--ink:#eef3ff;--muted:#b5c3d9;--line:#3b4c69;--green:#285bb0;--green2:#9dc2ff;--mint:#263e63;--shadow:0 12px 34px #0003}
body.dark .tab.active,body.dark .primary-button{background:#285bb0;color:#fff}
body.dark .primary-button:hover{background:#326bc6}
body.dark .summary-icon,body.dark .filter-chip.selected{color:#cfe1ff}
body.dark .filter-chip.selected{border-color:#5a7cae}
body.dark .weather-banner{background:#40351e;border-color:#6e592c;color:#f0dca9}
body.dark .weather-banner .quiet-button{color:#f0dca9}
body.dark .task-check:checked,body.dark .setting-toggle input:checked{background:#285bb0;border-color:#9dc2ff}
body.dark .time-tag{background:#263e63;color:#cfe1ff}
body.dark .danger-button{background:#472a28;color:#ffb8b0;border-color:#6b3833}
body.dark .weekly-card{background:#233f6c}
body.dark .welcome-card{background:linear-gradient(120deg,#1d345a,#2b5091)}
.field-input::placeholder{color:var(--muted);opacity:1}
@media(min-width:700px){.app-shell{padding-bottom:42px}.view#view-today{display:block}.summary-grid{max-width:580px}.task-list{gap:10px}.task-card{padding:16px 18px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.app-header{padding-top:36px}.welcome-card{padding:32px 36px}}
@media(max-width:420px){.app-header{padding:22px 16px 17px}.app-shell{padding:0 14px 25px}.welcome-card{padding:21px 18px;border-radius:20px}.date-bubble{width:69px;height:69px}.date-bubble span{font-size:1.4rem}.tabs{margin:16px 0 24px}.tab{padding:11px 10px;font-size:.83rem}.section-heading h2{font-size:1.3rem}.primary-button{padding:11px 12px}.summary-card{padding:13px 11px;gap:9px}.summary-icon{width:36px;height:36px}.summary-card strong{font-size:1.3rem}.app-footer{padding:10px 15px 25px}.task-dialog{padding:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep routine descriptions aligned and spaced correctly */
#scheduleList .task-notes {
  white-space: normal;
  text-align: left;
  line-height: 1.5;
  margin: 7px 0 0;
}

#scheduleList .summary-icon {
  flex-shrink: 0;
}

#scheduleList .task-notes { white-space: normal; text-align: left; line-height: 1.5; margin-top: 7px; }
.summary-icon { flex-shrink: 0; }
#personalSettingsForm { margin-top: 16px; }

/* Entry page: hide the dashboard until an account or guest is selected. */
[hidden] { display: none !important; }
.entry-page { min-height: 100svh; display: grid; place-items: center; padding: 28px 18px; }
.entry-card { width: 100%; max-width: 480px; padding: clamp(24px, 6vw, 42px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.entry-icon { border-radius: 18px; margin-bottom: 20px; }
.entry-card h1 { margin: 8px 0 20px; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.2; }
.entry-intro { font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.entry-card p { line-height: 1.6; }
.entry-actions { display: grid; gap: 12px; margin: 26px 0 18px; }
.entry-actions button { width: 100%; min-height: 48px; white-space: normal; }

.dashboard-menu { position: relative; flex-shrink: 0; }
.dashboard-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 1.4rem; }
.dashboard-menu summary::-webkit-details-marker { display: none; }
.dashboard-menu summary:focus-visible { outline: 3px solid var(--green2); outline-offset: 3px; }
.dashboard-menu-panel { position: absolute; top: 54px; right: 0; z-index: 40; width: min(340px, calc(100vw - 32px)); max-height: calc(100svh - 140px); overflow-y: auto; padding: 20px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.menu-title { margin: 0 0 18px; font-size: 1.2rem; }
.menu-theme-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dashboard-menu-panel > button { display: block; width: 100%; text-align: left; margin: 10px 0; min-height: 44px; }
#menuAccount .settings-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; margin: 18px 0 0 !important; box-shadow: none; background: transparent; }
#menuAccount button { white-space: normal; min-height: 44px; }
#menuAccount p { font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Shared theme colours also cover the original planner's components. */
.primary-button, .tab.active, body.dark .primary-button, body.dark .tab.active { background: var(--button, var(--green)); color: var(--button-text, #fff); }
.primary-button:hover, body.dark .primary-button:hover { background: var(--button-hover, var(--green)); }
.welcome-card, body.dark .welcome-card, .weekly-card, body.dark .weekly-card { background: var(--hero, var(--green)); color: var(--hero-text, #fff); }
.welcome-card p:last-child, .weekly-card > p:not(.eyebrow), .eyebrow.light, .date-bubble small { color: var(--hero-muted, #fff); }
.time-tag, body.dark .time-tag, .summary-icon, body.dark .summary-icon { background: var(--mint); color: var(--green2); }
.filter-chip.selected, body.dark .filter-chip.selected { border-color: var(--green2); background: var(--mint); color: var(--green2); }
.task-check:checked, body.dark .task-check:checked, .setting-toggle input:checked, body.dark .setting-toggle input:checked { background: var(--button, var(--green)); border-color: var(--green2); }
.pale .progress-fill { background: var(--hero-progress, #fff); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus, var(--green2)); outline-offset: 3px; }
input, textarea, select { caret-color: var(--ink); }
.toast { background: var(--button, var(--green)); color: var(--button-text, #fff); }
body { transition: background-color .15s ease, color .15s ease; }
.tabs { gap: 3px; }
.tab { padding-inline: 10px; }
.member-badge { display: inline-block; font-size: .65rem; font-weight: 700; background: var(--mint); color: var(--green2); border-radius: 6px; padding: 3px 6px; vertical-align: middle; white-space: normal; }
.wellbeing-nav { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.wellbeing-nav button { min-height: 44px; }
.journal-writing { line-height: 1.8; font-size: 1rem; min-height: 220px; }
.prompt-details { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.prompt-details summary, .habit-card summary { color: var(--green2); font-size: .9rem; cursor: pointer; padding: 8px 0; }
.journal-entry-list { display: grid; gap: 10px; }
.journal-entry { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 8px 12px; }
.journal-open { display: grid; gap: 7px; flex: 1; min-width: 0; text-align: left; padding: 10px 2px; border: 0; color: var(--ink); background: transparent; }
.journal-open strong { overflow-wrap: anywhere; }
.entry-date { color: var(--muted); font-size: .78rem; }
.entry-excerpt { color: var(--muted); font-size: .85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mood-choices { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-top: 20px; }
.mood-choice { display: grid; gap: 6px; padding: 12px 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .8rem; min-height: 64px; }
.mood-choice span { font-size: 1.3rem; }
.mood-choice.selected { background: var(--mint); border: 2px solid var(--green2); font-weight: 700; }
.mood-history-row { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 13px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px; text-align: left; }
.mood-history-row .entry-excerpt { grid-column: 1 / -1; }
.habit-days { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.habit-days legend { font-size: .85rem; padding: 0 5px; }
#habitDays { display: flex; flex-wrap: wrap; gap: 8px; }
#habitDays label { display: flex; align-items: center; min-height: 44px; gap: 5px; padding: 4px 8px; border-radius: 8px; background: var(--surface2); color: var(--ink); }
#habitDays input { accent-color: var(--button); }
.habit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#habitSummary { margin-top: 18px; }
.habit-progress { padding: 12px 0; }
.habit-progress p { margin: 5px 0 10px; }
.insight-row { display: grid; grid-template-columns: 55px 1fr 30px; gap: 10px; align-items: center; font-size: .85rem; margin: 12px 0; }
.insight-track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); }
.insight-track > span { display: block; height: 100%; background: var(--green2); }
.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.theme-choice { text-align: left; display: grid; gap: 9px; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.theme-choice.selected { outline: 2px solid var(--green2); outline-offset: 2px; }
.theme-choice small { color: var(--muted); }
.theme-swatch { display: flex; align-items: center; gap: 7px; height: 54px; padding: 10px; border: 1px solid; border-radius: 8px; }
.theme-swatch > span { width: 25px; height: 25px; border-radius: 50%; }
.theme-preview { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); }
.theme-preview .primary-button { background: var(--button); color: var(--button-text); }
button:disabled { cursor: default; opacity: .65; }
.task-main .task-notes { white-space: normal; }
@media(max-width:480px) { .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tabs .tab { font-size: .78rem; padding: 12px 7px; } .section-heading { flex-wrap: wrap; } .journal-entry { align-items: flex-start; } .mood-choices { gap: 4px; } .dashboard-menu-panel { max-height: calc(100svh - 100px); } }
