/* Daily planner. Research and visual decisions: DESIGN.md. */
:root {
  color-scheme: light;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans); --serif: var(--display);
  --canvas: #faf8f3; --surface: #fffdf9; --surface-2: #eeeae2; --surface-3: #e5dfd4; --rail: #f0ece4;
  --ink: #292521; --ink-2: #686157; --ink-3: #756e64; --hair: #dfd9ce; --hair-2: #aca397;
  --accent: #ae3e26; --accent-dark: #8d2d19; --accent-ink: #fffaf5; --accent-soft: #ffe2d5;
  --good: #ae3e26; --good-soft: #ffe2d5; --amber: #7d530b; --amber-soft: #ffe185;
  --danger: #ae2846; --danger-soft: #fce0e5; --bar: #fffdf9; --bar-ink: #292521;
  --morning: #ffe59b; --morning-ink: #624611; --midday: #ffc5b5; --midday-ink: #803c2a;
  --evening: #d8ccf5; --evening-ink: #5c4581; --anytime: #c3e3f3; --anytime-ink: #315b72;
  --orange: #f47451; --yellow: #ffd66c; --purple: #aa92d8; --sky: #8abfdc;
  --shadow: 0 2px 0 #29252108; --shadow-lg: 0 18px 60px #2925212b;
  --r-sm: 8px; --r: 14px; --r-lg: 18px; --line-h: 72px; --rail-width: 214px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #221f1e; --surface: #2b2826; --surface-2: #36312e; --surface-3: #46403b; --rail: #1c1a19;
  --ink: #f7f0e7; --ink-2: #c6bdb1; --ink-3: #b6aa9c; --hair: #4a4139; --hair-2: #928273;
  --accent: #ffb09b; --accent-dark: #ffcab9; --accent-ink: #482016; --accent-soft: #4e3026;
  --good: #ffb09b; --good-soft: #4e3026; --amber: #ffe59b; --amber-soft: #514124;
  --danger: #ffa8bc; --danger-soft: #4e2831; --bar: #2b2826; --bar-ink: #f7f0e7;
  --morning: #514124; --morning-ink: #ffe5a0; --midday: #53372e; --midday-ink: #ffc5b5;
  --evening: #423751; --evening-ink: #ded0ff; --anytime: #2e4551; --anytime-ink: #c3e3f3;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --canvas: #221f1e; --surface: #2b2826; --surface-2: #36312e; --surface-3: #46403b; --rail: #1c1a19;
    --ink: #f7f0e7; --ink-2: #c6bdb1; --ink-3: #b6aa9c; --hair: #4a4139; --hair-2: #928273;
    --accent: #ffb09b; --accent-dark: #ffcab9; --accent-ink: #482016; --accent-soft: #4e3026;
    --good: #ffb09b; --good-soft: #4e3026; --amber: #ffe59b; --amber-soft: #514124;
    --danger: #ffa8bc; --danger-soft: #4e2831; --bar: #2b2826; --bar-ink: #f7f0e7;
    --morning: #514124; --morning-ink: #ffe5a0; --midday: #53372e; --midday-ink: #ffc5b5;
    --evening: #423751; --evening-ink: #ded0ff; --anytime: #2e4551; --anytime-ink: #c3e3f3;
  }
}
[hidden] { display: none !important; }
body { font-size: 15px; font-weight: 400; }
body[data-authed="true"] { padding-bottom: 0; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, a, p, h1, h2, h3 { overflow-wrap: anywhere; }
em, .serif, .serif em, h1, h2, h3 { font-style: normal; }
h1, h2, h3, .serif { font-family: var(--display); font-weight: 700; letter-spacing: -.55px; line-height: 1.15; }
.serif em { color: inherit; }
.ui-icon { width: 21px; height: 21px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn { min-height: 46px; padding: 0 20px; border-radius: 10px; font: 600 14px/1.3 var(--sans); white-space: normal; text-decoration: none; box-shadow: none; }
.btn.block { padding: 0 20px; }
.btn.primary, .btn.dark { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.btn.primary:hover, .btn.dark:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.sm { min-height: 40px; border-radius: 8px; font-size: 13px; }
.btn .ui-icon { width: 18px; height: 18px; }
.field { font-size: 14px; font-weight: 500; }
.field input, .field textarea, .field select { font-size: 16px; font-weight: 400; border-radius: 9px; background: var(--surface); border-color: var(--hair-2); }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input.range:focus { box-shadow: none; }
.seg, .seg button, .chip { border-radius: 7px; }
.seg button { min-height: 40px; font-size: 13px; font-weight: 500; }
.eyebrow, .kicker { display: block; margin: 0; color: var(--ink-2); font: 500 11px/1.6 var(--sans); letter-spacing: 1.3px; }
.hint { font-size: 13px; line-height: 1.6; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; color: var(--ink-2); text-decoration: none; flex-shrink: 0; }
.icon-button:hover { background: var(--surface-2); color: var(--ink); }
.text-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 13px var(--sans); color: var(--ink); text-decoration: none; }
.text-action:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.text-action .ui-icon { width: 16px; height: 16px; }
.wordmark { display: inline-block; font: 800 37px/.9 var(--display); letter-spacing: -1.7px; text-decoration: none; flex-shrink: 0; color: var(--ink); }
.wordmark > span { color: var(--orange); }
.skip-link { position: fixed; left: 16px; top: -100px; padding: 14px 20px; background: var(--ink); color: var(--canvas); z-index: 200; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* Navigation is deliberately quiet; the day's content carries the color. */
.app-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-width); z-index: 30; background: var(--rail); border-right: 1px solid var(--hair); }
.app-header-inner { display: flex; flex-direction: column; height: 100%; padding: 40px 22px 25px; }
.app-header .wordmark { margin: 1px 4px 48px; font-size: 32px; white-space: nowrap; }
.desktop-nav { display: flex; flex-direction: column; gap: 8px; }
.workspace-link { display: flex; align-items: center; gap: 13px; min-height: 49px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.workspace-link .ui-icon { width: 22px; height: 22px; }
.workspace-link:hover { background: var(--surface); color: var(--ink); }
.workspace-link.active { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 #29252107; }
.nav-sun .ui-icon { color: var(--accent); }
.nav-habits .ui-icon { color: var(--morning-ink); }
.nav-progress .ui-icon { color: var(--anytime-ink); }
.nav-journal .ui-icon { color: var(--evening-ink); }
.header-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 24px 2px 17px; }
.coach-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.coach-trigger:hover { color: var(--accent); }
.ai-label { font-size: 9px; border: 1px solid var(--hair-2); border-radius: 3px; padding: 0 3px; color: var(--ink-2); }
.account-link { display: flex; align-items: center; gap: 10px; min-height: 60px; padding-top: 17px; border-top: 1px solid var(--hair); text-decoration: none; }
.account-link > .ui-icon { margin-left: auto; width: 16px; height: 16px; color: var(--ink-2); }
.account-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name small { display: block; color: var(--ink-2); font-size: 11px; margin-top: 3px; }
.user-initial { width: 35px; height: 35px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--midday); color: var(--midday-ink); font: 700 16px var(--display); }
.mobile-nav { display: none; }
.workspace-main { margin-left: var(--rail-width); min-height: 100dvh; }
.workspace-page, .workspace-main > .wrap { width: min(1140px, calc(100% - 88px)); margin: 0 auto; padding: 41px 0 27px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 31px; }
.page-heading h1 { font: 700 clamp(36px, 3.9vw, 54px)/1.05 var(--display); letter-spacing: -1.8px; margin: 9px 0 11px; }
.page-heading p { font-size: 14px; line-height: 1.7; margin: 0; color: var(--ink-2); }
.page-heading .greeting { font-size: 14px; }
.heading-dot { color: var(--orange); }
.heading-date { font-size: 13px !important; }
.page-heading .btn { flex-shrink: 0; }

/* Today is a sequence of tasks, with secondary tools alongside. */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 276px; grid-template-areas: "heading heading" "week summary" "timeline support" "foot foot"; gap: 0 32px; }
.home > .page-heading { grid-area: heading; margin-bottom: 26px; }
.home > #daily-summary { grid-area: summary; min-width: 0; align-self: stretch; }
.home > .today-main { grid-area: timeline; min-width: 0; }
.home > .week-card { grid-area: week; }
.home > .support-grid { grid-area: support; }
.home > .workspace-foot { grid-area: foot; }
.daily-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; border-radius: 13px; background: var(--surface-2); padding: 23px 22px 18px; height: 100%; }
.summary-copy > span { font-size: 12px; color: var(--ink-2); }
.summary-copy h2 { font-size: 20px; line-height: 1.2; margin: 8px 0 0; max-width: 13ch; }
.completion-number { text-align: right; }
.completion-number strong { display: block; font: 700 37px/1 var(--display); letter-spacing: -1.5px; }
.completion-number strong span { font-size: 22px; color: var(--ink-2); letter-spacing: -.6px; }
.completion-number small { font-size: 10px; color: var(--ink-2); }
.momentum-track { grid-column: 1/-1; height: 6px; background: var(--hair); border-radius: 4px; overflow: hidden; }
.momentum-track i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .2s; }
.week-card { padding: 0 0 12px; min-width: 0; }
.week-card-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.week-card-heading h2 { font: 500 13px var(--sans); margin: 0; }
.week-card-heading a { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); text-decoration: none; min-height: 28px; }
.week-card-heading a:hover { text-decoration: underline; }
.week-card-heading .ui-icon { width: 14px; height: 14px; }
.week-chart { display: flex; justify-content: space-between; gap: 11px; }
.week-day { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; }
.week-label { font-size: 11px; color: var(--ink-2); }
.week-date { display: grid; place-items: center; width: 31px; height: 33px; font: 600 16px var(--sans); margin: 3px 0 5px; border-radius: 9px; }
.week-track { background: var(--surface-3); height: 4px; width: 100%; max-width: 33px; border-radius: 3px; overflow: hidden; }
.week-track i { display: block; height: 100%; background: var(--ink-2); border-radius: inherit; }
.week-value { font-size: 10px; color: var(--ink-2); margin-top: 5px; }
.is-today .week-date { background: var(--accent); color: var(--accent-ink); }
.is-today .week-track i { background: var(--accent); }
.is-today .week-value { color: var(--accent); }
.week-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 11px; color: var(--ink-2); }
.week-foot strong { font-weight: 500; color: var(--ink); }
.week-foot strong > span { color: var(--ink-2); }
.daily-plan { margin-top: 26px; }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.board-heading h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 22px; }
.count-label { font: 500 12px var(--sans); color: var(--ink-2); }
.plan-link { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 11px; color: var(--ink-2); min-height: 28px; }
.plan-link .ui-icon { width: 12px; height: 12px; }
.plan-link:hover { color: var(--accent); }
.plan-filter { display: flex; gap: 3px; border-bottom: 1px solid var(--hair); flex-shrink: 0; }
.plan-filter button { position: relative; min-height: 40px; padding: 0 11px; font: 500 12px var(--sans); color: var(--ink-2); }
.plan-filter button.on { color: var(--ink); }
.plan-filter button.on::after { content: ''; position: absolute; height: 2px; background: var(--ink); bottom: -1px; left: 10px; right: 10px; }
#habit-segments { display: flex; flex-direction: column; gap: 20px; }
.period-morning { --period: var(--morning); --period-ink: var(--morning-ink); }
.period-midday { --period: var(--midday); --period-ink: var(--midday-ink); }
.period-evening { --period: var(--evening); --period-ink: var(--evening-ink); }
.period-anytime, .coming { --period: var(--anytime); --period-ink: var(--anytime-ink); }
section.block { margin: 0; min-width: 0; padding: 18px 22px 8px; background: var(--period, var(--surface-2)); border: none; border-radius: 15px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; margin: 0; }
.block-head h2, .block-head h2.serif { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 600 19px var(--display); margin: 0; }
.block-head h2 > .ui-icon { width: 25px; height: 25px; color: var(--period-ink); }
.block-head small { font: 400 11px var(--sans); color: var(--period-ink); }
.block.clear .block-head h2 { color: var(--ink); }
.now-tag { background: transparent; color: var(--period-ink); font: 500 9px var(--sans); padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; letter-spacing: .4px; }
.habits { display: flex; flex-direction: column; gap: 0; border: 0; background: transparent; border-radius: 0; }
.habit { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px 0; min-height: 75px; position: relative; border: 0; border-top: 1px solid color-mix(in srgb, var(--period-ink, var(--ink)) 17%, transparent); background: transparent; border-radius: 0; }
.habit:hover { background: color-mix(in srgb, var(--surface) 12%, transparent); }
.habit.done { opacity: 1; }
.block.now .habit { box-shadow: none; }
.tick, .tick.ahead { display: grid; place-items: center; position: relative; width: 40px; height: 44px; border: 0; border-radius: 9px; margin: 0; color: var(--period-ink, var(--ink)); background: none; }
.tick::before { content: ''; position: absolute; width: 25px; height: 25px; border: 1.5px solid var(--period-ink, var(--hair-2)); border-radius: 8px; z-index: 0; }
.tick svg { width: 17px; height: 17px; z-index: 1; }
.habit.done .tick { background: none; color: var(--period, var(--canvas)); border: 0; }
.habit.done .tick::before { background: var(--period-ink, var(--ink)); border-color: var(--period-ink, var(--ink)); }
.tick.val { font: 600 13px var(--sans); color: var(--period-ink); isolation: isolate; }
.tick.val::before { content: none; }
.tick-number { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 3px; border: 1.5px solid var(--period-ink); border-radius: 8px; color: var(--period-ink); }
.habit.done .tick-number { background: var(--period-ink); color: var(--period); }
.habit.done .tick.val { color: var(--period); background: transparent; border: 0; }
.h-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; min-height: 47px; padding: 0; text-align: left; }
.h-name { font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -.15px; color: var(--ink); }
.h-name .ess { color: var(--period-ink); font-size: 7px; margin-left: 6px; vertical-align: 2px; font-style: normal; }
.h-meta { font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--period-ink, var(--ink-2)); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.habit.done .h-name { color: var(--period-ink); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.h-actions { display: flex; align-items: center; gap: 2px; }
.h-btn, .h-btn.play { display: grid; place-items: center; width: 32px; height: 44px; background: transparent; border-radius: 7px; color: var(--period-ink, var(--ink-2)); }
.h-btn:hover { background: color-mix(in srgb, var(--surface) 35%, transparent); }
.h-btn .ui-icon { width: 18px; height: 18px; }
.h-btn.play .ui-icon { width: 14px; height: 14px; }
.h-key { display: none; }
.column-add { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 39px; padding-left: 9px; color: var(--period-ink); border-top: 1px solid color-mix(in srgb, var(--period-ink) 17%, transparent); font-size: 11px; }
.column-add .ui-icon { width: 15px; height: 15px; }
.column-add:hover { text-decoration: underline; text-underline-offset: 3px; }
.block.coming, .duo { margin-top: 22px; }
.filtered-empty, .empty { padding: 34px 25px; border-radius: 15px; background: var(--surface-2); font-size: 14px; }
.empty h3 { font-size: 24px; }.empty p { color: var(--ink-2); line-height: 1.7; }
.empty-icon { display: block; margin-bottom: 15px; color: var(--accent); }
.support-grid { display: flex; flex-direction: column; gap: 24px; padding-top: 26px; }
.checkin-card { background: var(--evening); border-radius: 15px; padding: 26px; color: var(--ink); }
.checkin-top { display: flex; align-items: center; justify-content: space-between; color: var(--evening-ink); }
.checkin-top > span { font-size: 10px; font-weight: 500; letter-spacing: .9px; }
.checkin-top .ui-icon { width: 36px; height: 36px; transform: rotate(8deg); stroke-width: 1.1; }
.checkin-card h2 { font-size: 30px; line-height: 1.05; margin: 28px 0 16px; max-width: 10ch; }
.checkin-card p { font-size: 13px; line-height: 1.8; margin: 0 0 23px; color: var(--evening-ink); }
.checkin-card .btn { background: transparent; color: var(--ink); border: 1px solid var(--evening-ink); width: 100%; justify-content: space-between; padding: 0 15px; }
.checkin-card .btn:hover { background: var(--surface); }
.checkin-card > a { display: block; text-align: center; margin-top: 14px; padding: 7px; color: var(--evening-ink); font-size: 12px; text-underline-offset: 3px; }
.gentle-card { padding: 0 4px 20px; border-bottom: 1px solid var(--hair); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }
.section-heading h2 { margin: 0; font-size: 21px; }
.gentle-card .section-heading { margin-bottom: 10px; }
.gentle-card .section-heading h2 { font-size: 20px; }
.gentle-card .section-heading > .ui-icon { color: var(--accent); width: 20px; }
.gentle-card p { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 0 0 5px; }
.gentle-card .text-action { color: var(--accent); }
.thought-link { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px; min-height: 44px; text-align: left; color: var(--ink-2); font-size: 12px; }
.thought-link > .ui-icon { width: 18px; height: 18px; margin-top: 2px; }
.thought-link > .ui-icon:last-child { margin-left: auto; }
.thought-link small { display: block; font-size: 11px; margin-top: 5px; color: var(--ink-2); }
.thought-link:hover { color: var(--accent); }
.workspace-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--hair); margin-top: 30px; padding-top: 20px; color: var(--ink-2); font-size: 11px; }
.workspace-foot a { display: flex; gap: 6px; align-items: center; text-decoration: none; padding: 8px 0; }
.workspace-foot .ui-icon { width: 14px; height: 14px; }

/* Habit management uses the same time-of-day colors as Today. */
.plan-banner { display: flex; align-items: center; gap: 18px; padding: 22px 25px; background: var(--morning); border-radius: 14px; margin-bottom: 31px; }
.plan-banner-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--morning-ink); flex-shrink: 0; }
.plan-banner-icon .ui-icon { width: 30px; height: 30px; }
.plan-banner h2 { font-size: 25px; margin: 5px 0 7px; }
.plan-banner .eyebrow { color: var(--morning-ink); font-size: 10px; }
.plan-banner p { font-size: 13px; color: var(--morning-ink); margin: 0; }
.plan-banner > .btn { margin-left: auto; background: transparent; color: var(--ink); border-color: var(--morning-ink); }
.manage-list { padding: 0; background: transparent; }
.manage-row { display: flex; width: 100%; align-items: center; gap: 17px; padding: 20px 3px; text-align: left; border-top: 1px solid var(--hair); }
.manage-row:hover { background: var(--surface-2); }
.habit-symbol { width: 47px; height: 47px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--period, var(--surface-2)); color: var(--period-ink, var(--ink)); }
.manage-row strong { display: block; font-size: 16px; font-weight: 500; }
.manage-row small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.manage-time { margin-left: auto; color: var(--period-ink, var(--ink-2)); background: var(--period, var(--surface-2)); padding: 6px 11px; border-radius: 6px; white-space: nowrap; font-size: 11px; }
.manage-row > .ui-icon { width: 18px; color: var(--ink-2); margin: 0 8px; }
.help-strip { display: flex; align-items: center; gap: 19px; margin-top: 27px; padding: 24px 0; border-top: 1px solid var(--hair); }
.help-strip > .ui-icon { width: 28px; height: 28px; color: var(--accent); }
.help-strip strong { font-size: 14px; font-weight: 500; }
.help-strip p { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.help-strip .btn { margin-left: auto; }

/* Journal: a writing surface and optional prompts, not a quotation panel. */
.journal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 263px; gap: 31px; align-items: start; }
.journal-editor { background: var(--surface); padding: 27px; border: 1px solid var(--hair); border-radius: 14px; }
.journal-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 3px 0 15px; }
.range-row { align-items: center; color: var(--ink-2); }
.range-row output { font: 600 23px var(--display); color: var(--ink); }
.journal-editor textarea { line-height: 30px; min-height: 212px; background-image: repeating-linear-gradient(transparent 0px, transparent 29px, var(--hair) 29px, var(--hair) 30px); background-size: calc(100% - 32px) 30px; background-position: 16px 14px; background-repeat: repeat-y; }
.journal-save { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 9px; }
.journal-save .hint { font-size: 12px; max-width: 30ch; }
.optional { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.date-label { font-size: 12px; color: var(--accent); }
.journal-note { padding: 28px 23px; background: var(--morning); border-radius: 14px; color: var(--ink); }
.journal-note .eyebrow { color: var(--morning-ink); font-size: 10px; }
.journal-note h2 { font-size: 26px; margin: 20px 0 13px; }
.journal-note > p { font-size: 13px; line-height: 1.7; color: var(--morning-ink); margin: 0 0 18px; }
.journal-prompt { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 61px; width: 100%; border-top: 1px solid color-mix(in srgb, var(--morning-ink) 25%, transparent); font-size: 13px; line-height: 1.6; }
.journal-prompt .ui-icon { width: 15px; height: 15px; margin-left: auto; }
.journal-prompt:hover { color: var(--morning-ink); text-decoration: underline; text-underline-offset: 3px; }
.journal-note .text-action { margin-top: 18px; color: var(--morning-ink); font-size: 12px; }
.journal-history { margin-top: 34px; }
.journal-entry { display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 23px; padding: 25px 0; border-top: 1px solid var(--hair); }
.journal-entry time { font-size: 12px; color: var(--ink-2); padding-top: 4px; }
.journal-entry p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; margin: 0 0 13px; }
.journal-entry .gratitude-note { color: var(--ink-2); font-size: 13px; }
.journal-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.journal-tags span { background: var(--evening); color: var(--evening-ink); font-size: 11px; padding: 5px 9px; border-radius: 5px; }
.journal-tags span:first-child { background: var(--morning); color: var(--morning-ink); }
.journal-empty { padding: 24px 0; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 14px; }

/* Progress combines a colored summary strip with straightforward charts. */
.progress-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; border-radius: 14px; overflow: hidden; }
.progress-stats > div { background: var(--morning); padding: 24px; color: var(--ink); }
.progress-stats > div:nth-child(2) { background: var(--midday); }
.progress-stats > div:nth-child(3) { background: var(--evening); }
.progress-stats > div:nth-child(4) { background: var(--anytime); }
.progress-stats > div > span { font-size: 12px; }
.progress-stats strong { display: block; font: 600 41px var(--display); margin: 11px 0 7px; letter-spacing: -1px; }
.progress-stats small { font: 400 13px var(--sans); margin-left: 5px; letter-spacing: 0; }
.progress-stats p { font-size: 11px; line-height: 1.6; margin: 0; }
.progress-card { min-width: 0; padding: 25px 0; border-top: 1px solid var(--hair); background: transparent; }
.progress-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.heat { overflow-x: auto; padding: 10px 3px 5px; }
.heat-grid { grid-template-columns: repeat(26, minmax(0, 1fr)); grid-template-rows: repeat(7, 16px); gap: 5px; width: 100%; min-width: 470px; }
.heat-cell { width: 100%; height: 16px; border-radius: 3px; }
.heat-cell.future { visibility: hidden; }
.heat-months { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 5px; width: 100%; min-width: 470px; margin-bottom: 11px; }
.heat-months span { width: auto; white-space: nowrap; font-size: 11px; }
.legend { margin-top: 15px; justify-content: flex-end; }
.legend .heat-cell { width: 12px; height: 12px; }
.wk { gap: 17px; margin-top: 23px; }
.wk-row { font-size: 13px; }
.wk-bar, .hrate-bar { height: 7px; }
.wk-bar span { background: var(--purple); }
.wk-row.best .wk-bar span { background: var(--accent); }
.hrate { gap: 23px; margin-top: 25px; }
.hrate-row { font-size: 13px; grid-template-columns: 27px minmax(0, 1fr) 40px; font-weight: 500; }
.hrate-row > span:first-child { color: var(--period-ink, var(--ink-2)); }
.hrate-bar > span { background: var(--period-ink, var(--accent)); }
.hrate-row .nm { white-space: normal; line-height: 1.5; }
.review { padding: 27px; border: none; border-radius: 14px; background: var(--surface-2); box-shadow: none; }
.review .serif { font-size: 24px; }
.review .muted { font-size: 14px; line-height: 1.7; }
.sec-head h2.serif { font-size: 24px; }

/* Account and secondary tools. */
.workspace-main .top { padding-top: 0; margin-bottom: 27px; }
.workspace-main .display { font: 700 45px/1.1 var(--display); letter-spacing: -1.2px; }
.avatar { font: 500 20px var(--sans); border-radius: 10px; }
.settings-intro { display: flex; align-items: center; gap: 18px; padding: 25px; background: var(--midday); border-radius: 14px; }
.settings-intro .user-initial { width: 51px; height: 51px; background: var(--surface); color: var(--ink); font-size: 22px; }
.settings-intro h2 { margin: 0; font-size: 24px; }
.settings-intro p { font-size: 13px; line-height: 1.7; color: var(--midday-ink); margin: 5px 0 0; }
.you-list { gap: 0; }
.you-row { padding: 23px 0; border: none; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; }
.you-row .t { font-size: 15px; font-weight: 500; }
.you-row .s { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.you-row.support-callout { padding: 20px; border: 1px solid var(--hair); border-radius: 10px; }
.sheet { align-items: center; padding: 24px; background: #29252180; backdrop-filter: blur(3px); }
.sheet-card { background: var(--surface); border-radius: 17px; max-height: 90dvh; padding: 30px; box-shadow: var(--shadow-lg); }
.sheet-h h2, .sheet-h h2.serif { font: 600 32px/1.1 var(--display); letter-spacing: -.8px; }
.sheet-h .kicker { font-size: 11px; color: var(--ink-2); }
.sheet-x { width: 44px; height: 44px; border-radius: 9px; font: 400 27px var(--sans); }
.sheet-open, .command-open { overflow: hidden; }
.sheet-card.thread { display: flex; flex-direction: column; height: min(730px, 88dvh); padding-bottom: 24px; }
.sheet-card.thread #sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sheet-card.thread .thread-log { min-height: 0; }
.thread-habits span { font-size: 12px; font-weight: 400; border-radius: 6px; }
.bub { font-size: 14px; line-height: 1.8; border-radius: 12px; }
.bub.me { background: var(--midday); color: var(--ink); }
.line { pointer-events: auto; }
.line:not(.coach):not(.is-open) { display: none; }
.line:not(.coach) { inset: 0; padding: min(18vh, 150px) 20px 20px; background: #29252180; backdrop-filter: blur(3px); }
.line:not(.coach) .line-inner { display: flex; flex-direction: column-reverse; width: min(640px, 100%); gap: 9px; }
.line-panel { border-radius: 12px; }
.line:not(.coach) .line-panel { margin: 0; max-height: 55dvh; }
.line-bar { min-height: 60px; padding: 8px; background: var(--surface); border-radius: 12px; box-shadow: none; }
.line-bar input { font-size: 16px; }
.line-mark, .line-send { width: 40px; height: 40px; border-radius: 8px; }
.line-mark { background: var(--morning); color: var(--morning-ink); }
.line-mark svg, .line-send svg { width: 19px; height: 19px; }
.sheet-card .line.coach { position: static; inset: auto; width: 100%; padding: 12px 0 0; background: none; flex-shrink: 0; }
.sheet-card .line.coach .line-inner { width: 100%; }
.routine-coach-card { border: 1px solid var(--hair); border-radius: 13px; padding: 20px; background: var(--surface); }
.routine-coach-card .section-heading { align-items: flex-start; gap: 12px; }
.routine-coach-card h2 { font-size: 19px; line-height: 1.3; }
.routine-coach-card .ui-icon { color: var(--accent); flex-shrink: 0; }
.routine-coach-card p { color: var(--ink-2); font-size: 13px; line-height: 1.7; margin: 10px 0 8px; }
.coach-heading { padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 12px; }
.coach-heading h2 { max-width: 14ch; }
.coach-intro { color: var(--ink-2); font-size: 13px; line-height: 1.6; margin: 10px 0 8px; }
.coach-connection { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); }
.coach-connection i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.coach-connection.connected i { background: #46704a; }
.coach-connection.disconnected i { background: var(--amber); }
.sheet-card.thread .thread-habits { max-height: 68px; overflow-y: auto; flex-shrink: 0; padding-bottom: 6px; }
.thread-log { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; overscroll-behavior: contain; }
.bub { max-width: 94%; overflow-wrap: anywhere; }
.bub.ai { background: var(--surface-2); border-color: transparent; }
.bub.me { white-space: pre-wrap; }
.bub.typing { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); letter-spacing: 0; font-size: 12px; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: coach-pulse 1.3s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes coach-pulse { 0%, 70%, 100% { opacity: .35; } 35% { opacity: 1; } }
.coach-prompts { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0; }
.coach-prompts button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--hair); border-radius: 9px; color: var(--ink-2); font-size: 12px; text-align: left; }
.coach-prompts button:hover { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.coach-prompts .ui-icon { width: 13px; height: 13px; }
.coach-footer { border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: 11px; }
.coach-footer > div { display: flex; gap: 16px; }.coach-footer .text-action { min-height: 36px; font-size: 11px; }
.coach-error { border: 1px solid var(--danger); border-radius: 10px; background: var(--danger-soft); color: var(--ink); padding: 12px 14px; font-size: 13px; }
.coach-error p { margin: 0; line-height: 1.6; }.coach-error .text-action { margin-top: 4px; }
.line-send:disabled { cursor: wait; opacity: .5; }.line-send:focus-visible, .coach-prompts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.line.coach .line-mark { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 640px) {
  .sheet-card.thread { height: 88dvh; max-height: calc(100dvh - 20px); }
  .coach-heading h2 { font-size: 27px !important; max-width: none; }.coach-intro { margin-top: 7px; }
  .sheet-card.thread .thread-habits { max-height: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .sheet-card.thread .thread-habits span { flex: 0 0 auto; white-space: nowrap; }.coach-prompts { gap: 5px; }
  .coach-prompts button { min-height: 38px; font-size: 11px; }.coach-footer > span { display: none; }
}
.line .nav-row button { font-size: 13px; }
.li { border-radius: 8px; }
.li-t { font-size: 14px; }.li-s { font-size: 12px; }
.toast { bottom: 24px; font-size: 13px; border-radius: 9px; box-shadow: 0 6px 24px #2925211a; }
.toast.big { font-size: 14px; }
.auth { background: var(--morning); }
.auth-card { width: min(468px, calc(100% - 36px)); background: var(--surface); padding: 38px; border-radius: 19px; border: 1px solid var(--hair); }
.auth-card h1 { font: 700 38px/1.1 var(--display); letter-spacing: -1px; margin: 35px 0 12px; }
.auth-card > .muted { font-size: 14px; line-height: 1.8; }
.auth-card .switch-line { font-size: 13px; margin-top: 26px; }
.onboard .display { line-height: 1.15; font-size: 42px; max-width: 21ch; }
.onboard .lede { font-size: 16px; }
.goal textarea, .pack { border-radius: 12px; }
.pack:nth-child(4n + 1) { background: var(--morning); }.pack:nth-child(4n + 2) { background: var(--midday); }
.pack:nth-child(4n + 3) { background: var(--evening); }.pack:nth-child(4n) { background: var(--anytime); }
.pack-s { color: var(--ink); }

/* The public page is a working sample of the same planner. */
.landing { background: var(--canvas); }
.landing-wrap { width: min(1240px, calc(100% - 96px)); margin: 0 auto; }
.landing-nav { display: flex; align-items: center; gap: 52px; height: 107px; }
.landing-nav .wordmark { font-size: 43px; }
.landing-nav > div { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.landing-how, .login-link { text-decoration: none; font-size: 14px; }
.landing-how:hover, .login-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.landing-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 78px; align-items: center; padding: 57px 0 88px; }
.landing-kicker { color: var(--ink-2); font: 500 11px var(--sans); letter-spacing: 1.2px; margin: 0 0 25px; }
.landing-intro h1 { font: 700 clamp(50px, 5.7vw, 78px)/.99 var(--display); letter-spacing: -3px; margin: 0 0 25px; }
.landing-intro h1 > span { color: var(--accent); }
.landing-lede { font-size: 17px; line-height: 1.8; color: var(--ink-2); max-width: 34ch; margin: 0 0 27px; }
.landing-cta { min-height: 54px; font-size: 15px; padding: 0 25px; border-radius: 10px; }
.landing-note { display: block; font-size: 12px; color: var(--ink-2); margin-top: 16px; }
.landing-preview { min-width: 0; padding: 24px 0 0; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; margin-bottom: 25px; }
.preview-heading > div > span { font-size: 9px; letter-spacing: 1px; color: var(--ink-2); }
.preview-heading h2 { font: 700 45px/1 var(--display); margin: 9px 0 0; letter-spacing: -1px; }
.preview-heading h2 > span { color: var(--orange); }
.preview-heading > .ui-icon { width: 56px; height: 56px; stroke-width: 1.1; color: var(--accent); }
.preview-habits { display: flex; flex-direction: column; gap: 14px; }
.preview-habit { position: relative; width: calc(100% - 15px); display: grid; grid-template-columns: minmax(0, 1fr) 39px; gap: 10px; padding: 19px 23px; border-radius: 14px; background: var(--period); color: var(--ink); text-align: left; transition: transform .16s ease; }
.preview-habit:nth-child(2) { margin-left: 15px; }
.preview-habit:hover { transform: translateY(-2px); }
.preview-period { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--period-ink); }
.preview-period .ui-icon { width: 17px; height: 17px; }
.preview-name { grid-column: 1; }
.preview-name strong { display: block; font: 600 20px/1.2 var(--display); letter-spacing: -.35px; }
.preview-name small { display: block; font-size: 12px; margin-top: 7px; color: var(--period-ink); }
.preview-check { display: grid; place-items: center; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 29px; height: 29px; border: 1.5px solid var(--period-ink); border-radius: 9px; color: var(--period); }
.preview-check .ui-icon { opacity: 0; width: 19px; height: 19px; }
.preview-habit.done .preview-check { background: var(--period-ink); }
.preview-habit.done .preview-check .ui-icon { opacity: 1; }
.preview-habit.done .preview-name strong { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--period-ink); }
.preview-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px; padding: 23px 15px 0; color: var(--ink-2); font-size: 12px; }
.preview-progress b { color: var(--ink); }
.preview-track { width: 100%; height: 5px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.preview-track i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .2s; }
.preview-hint { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 11px; color: var(--ink-2); margin: 16px 15px 0; }
.preview-hint .ui-icon { width: 15px; height: 15px; transform: rotate(-80deg); }
.landing-how-section { background: var(--evening); padding: 65px 0 72px; }
.how-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 110px; }
.how-layout .landing-kicker { color: var(--evening-ink); margin-top: 8px; }
.how-layout h2 { font: 600 48px/1.03 var(--display); letter-spacing: -1.4px; margin: 0 0 23px; }
.how-layout > div > p:last-child { font-size: 15px; color: var(--evening-ink); }
.how-steps article { display: flex; align-items: flex-start; gap: 21px; padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--evening-ink) 26%, transparent); }
.how-steps article:first-child { padding-top: 0; }.how-steps article:last-child { border: 0; padding-bottom: 0; }
.how-steps article > span { font-size: 11px; padding-top: 6px; color: var(--evening-ink); }
.how-steps h3 { font: 600 24px var(--display); letter-spacing: -.5px; margin: 0 0 8px; }
.how-steps p { font-size: 14px; line-height: 1.8; margin: 0; color: var(--evening-ink); }
.how-steps .ui-icon { width: 27px; height: 27px; margin-left: 10px; color: var(--evening-ink); }
.landing-footer { background: var(--morning); padding: 49px 0 23px; overflow: hidden; }
.footer-invite { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.footer-invite h2 { font: 600 33px var(--display); margin: 0; letter-spacing: -1px; }
.footer-wordmark { font: 800 clamp(130px, 24vw, 340px)/1.08 var(--display); letter-spacing: -.07em; margin: 28px 0 9px; }
.footer-wordmark > span { color: var(--accent); }
.footer-small { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid color-mix(in srgb, var(--morning-ink) 25%, transparent); padding-top: 24px; color: var(--morning-ink); font-size: 12px; }
.footer-small a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }.footer-small .ui-icon { width: 15px; height: 15px; }

@media (max-width: 1180px) {
  :root { --rail-width: 188px; }
  .app-header-inner { padding: 35px 16px 24px; }.app-header .wordmark { margin-inline: 4px; font-size: 30px; }
  .workspace-page, .workspace-main > .wrap { width: calc(100% - 58px); }.home { grid-template-columns: minmax(0, 1fr) 241px; gap: 0 25px; }
  .workspace-link { font-size: 14px; }.account-name { font-size: 12px; }.account-link > .ui-icon { display: none; }
  .checkin-card { padding: 23px; }.daily-summary { padding: 20px 17px 16px; gap: 13px; }.summary-copy h2 { font-size: 19px; }
  .completion-number strong { font-size: 33px; }.completion-number strong span { font-size: 20px; }
  section.block { padding: 17px 17px 7px; }.h-name { font-size: 14px; }.h-meta { font-size: 11px; }.h-actions { flex-direction: column; gap: 0; }
  .h-btn, .h-btn.play { height: 28px; width: 28px; }.plan-link { max-width: 200px; font-size: 10px; }.plan-filter button { padding: 0 8px; font-size: 11px; }
  .progress-stats > div { padding: 20px; }.journal-grid { grid-template-columns: minmax(0, 1fr) 226px; gap: 25px; }
  .journal-editor { padding: 23px; }.journal-save { flex-wrap: wrap; }.journal-note { padding: 25px 20px; }
  .landing-hero { gap: 44px; }.landing-intro h1 { font-size: 66px; }.landing-lede { font-size: 16px; }.how-layout { gap: 65px; }
}
@media (max-width: 980px) and (min-width: 701px) {
  :root { --rail-width: 84px; }
  .app-header-inner { padding: 35px 12px 24px; align-items: center; }.app-header .wordmark { font-size: 0; letter-spacing: 0; margin: 0 0 30px; width: 44px; height: 44px; background: url('./icons/icon.svg') center / 36px no-repeat; }
  .desktop-nav { width: 100%; }.desktop-nav .workspace-link { flex-direction: column; padding: 10px 0; gap: 5px; font-size: 9px; min-height: 66px; }
  .header-actions { flex-direction: column; }.coach-trigger > span { display: none; }.coach-trigger { width: 44px; justify-content: center; }
  .account-link { padding-top: 18px; }.account-name { display: none; }.workspace-page, .workspace-main > .wrap { width: calc(100% - 46px); }
  .home { grid-template-columns: minmax(0, 1fr) 221px; gap: 0 21px; }.page-heading h1 { font-size: 46px; }
  .block-head h2 { font-size: 18px; gap: 7px; }.block-head small { font-size: 10px; }.now-tag { display: none; }
  .board-heading { flex-wrap: wrap; gap: 7px; }.plan-filter { margin-left: auto; }.checkin-card { padding: 22px; }.checkin-card h2 { font-size: 28px; }
  .summary-copy h2 { font-size: 17px; }.summary-copy > span { font-size: 11px; }.completion-number strong { font-size: 30px; }
  .week-chart { gap: 7px; }.week-foot { font-size: 10px; }.h-name { font-size: 14px; }.h-meta { font-size: 11px; }
  .journal-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; }.journal-ranges { gap: 16px; }
  .journal-prompt { font-size: 12px; }.journal-editor { padding: 20px; }.progress-stats > div { padding: 19px 15px; }
  .progress-stats strong { font-size: 35px; }.progress-stats > div > span { font-size: 11px; }.progress-stats p { font-size: 10px; }
  .progress-grid { gap: 25px; }.manage-row { gap: 13px; }.manage-row strong { font-size: 14px; }.help-strip { flex-wrap: wrap; }
  .help-strip .btn { margin-left: 45px; }.landing-wrap { width: calc(100% - 64px); }.landing-hero { gap: 32px; padding-top: 40px; }
  .landing-intro h1 { font-size: 54px; letter-spacing: -2px; }.preview-name strong { font-size: 17px; }.preview-habit { padding: 17px; }
  .landing-lede { font-size: 15px; }.landing-kicker { font-size: 10px; }.how-layout { gap: 45px; }.how-layout h2 { font-size: 39px; }
}
@media (max-width: 700px) {
  body[data-authed="true"] { padding-bottom: calc(79px + env(safe-area-inset-bottom)); }
  .app-header { position: static; width: 100%; border: 0; background: var(--canvas); }
  .app-header-inner { flex-direction: row; align-items: center; height: 77px; padding: 0 20px; }
  .app-header .wordmark { margin: 0; font-size: 32px; letter-spacing: -1.4px; }
  .desktop-nav { display: none; }.header-actions { padding: 0; margin: 0 8px 0 auto; gap: 1px; }
  .coach-trigger { width: 40px; justify-content: center; }.coach-trigger > span { display: none; }.command-trigger { width: 40px; }
  .account-link { padding: 0; border: 0; min-height: 44px; justify-content: center; width: 35px; }.account-name, .account-link > .ui-icon { display: none; }
  .user-initial { width: 32px; height: 32px; font-size: 14px; }.workspace-main { margin-left: 0; min-height: calc(100dvh - 156px); }
  .workspace-page, .workspace-main > .wrap { width: calc(100% - 38px); padding-top: 19px; }
  .home { grid-template-columns: 1fr; grid-template-areas: "heading" "summary" "timeline" "week" "support" "foot"; }
  .page-heading, .home > .page-heading { margin-bottom: 23px; gap: 18px; align-items: center; }
  .page-heading h1 { font-size: 43px; letter-spacing: -1.4px; margin: 8px 0 6px; }.page-heading .greeting { font-size: 12px; }
  .page-heading p { font-size: 13px; }.heading-date { font-size: 12px !important; }
  .page-heading .btn { font-size: 12px; padding: 0 13px; min-height: 44px; gap: 6px; }.page-heading .btn .ui-icon { width: 16px; height: 16px; }
  .daily-summary { height: auto; grid-template-columns: 1fr auto; padding: 14px 17px 12px; gap: 11px; border-radius: 11px; }
  .summary-copy { display: flex; flex-direction: column; gap: 5px; }.summary-copy > span { font-size: 11px; }
  .summary-copy h2 { font-size: 20px; margin: 0; max-width: none; }.completion-number strong { font-size: 30px; }.completion-number strong span { font-size: 19px; }
  .completion-number small { display: none; }.momentum-track { height: 4px; }
  .daily-plan { margin-top: 23px; }.board-heading { margin-bottom: 14px; gap: 9px; }.board-heading h2 { font-size: 21px; }.count-label { font-size: 11px; }
  .plan-link { display: none; }.plan-filter button { padding: 0 9px; min-height: 40px; font-size: 11px; }
  #habit-segments { gap: 17px; }section.block { padding: 17px 15px 7px; border-radius: 14px; }
  .block-head { padding-bottom: 12px; }.block-head h2, .block-head h2.serif { font-size: 20px; gap: 8px; }.block-head h2 > .ui-icon { width: 24px; height: 24px; }
  .block-head small { font-size: 10px; }.now-tag { display: none; }
  .habit { grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 6px; min-height: 84px; padding: 10px 0; }
  .tick, .tick.ahead { width: 36px; height: 44px; }.tick::before { width: 25px; height: 25px; }
  .h-name { font-size: 14px; line-height: 1.5; }.h-meta { font-size: 12px; line-height: 1.55; }.h-body { min-height: 48px; }
  .h-actions { flex-direction: column; gap: 2px; }.h-btn, .h-btn.play { width: 28px; height: 28px; }.h-btn .ui-icon { width: 17px; height: 17px; }
  .column-add { min-height: 42px; font-size: 12px; padding-left: 8px; }
  .week-card { margin-top: 30px; padding: 0 5px 24px; border-bottom: 1px solid var(--hair); }
  .week-card-heading h2 { font: 600 22px var(--display); }.week-card-heading a { font-size: 12px; min-height: 44px; }
  .week-chart { gap: 12px; }.week-date { font-size: 16px; height: 38px; }.week-label, .week-value { font-size: 11px; }
  .week-foot { padding-top: 15px; font-size: 12px; }.support-grid { padding-top: 25px; gap: 25px; }
  .checkin-card { padding: 26px; }.checkin-top > span { font-size: 11px; }.checkin-card h2 { max-width: none; margin: 23px 0 14px; font-size: 32px; }
  .checkin-card p { font-size: 14px; margin-bottom: 20px; }.checkin-card > a { font-size: 13px; }
  .gentle-card { padding: 0 5px 20px; }.gentle-card p { font-size: 14px; }.text-action { font-size: 14px; }.thought-link { font-size: 13px; }.thought-link small { font-size: 12px; }
  .workspace-foot { flex-wrap: wrap; margin-top: 26px; gap: 7px; font-size: 11px; padding-bottom: 10px; }
  .mobile-nav { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--hair); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); }
  .mobile-nav .workspace-link { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 5px; font-size: 11px; min-height: 53px; padding: 5px; border-radius: 9px; }
  .mobile-nav .workspace-link.active { background: var(--surface-2); box-shadow: none; }.mobile-nav .ui-icon { width: 22px; height: 22px; }
  .plan-banner { padding: 22px; flex-wrap: wrap; gap: 13px; }.plan-banner-icon { display: none; }.plan-banner h2 { font-size: 25px; }.plan-banner > .btn { margin-left: 0; }
  .manage-list .section-heading { flex-wrap: wrap; }.manage-list .section-heading .hint { font-size: 11px; }
  .manage-row { gap: 12px; padding: 19px 0; flex-wrap: wrap; }.habit-symbol { width: 39px; height: 43px; }
  .manage-row > span:nth-child(2) { flex: 1; min-width: 0; }.manage-row strong { font-size: 14px; }.manage-row small { font-size: 12px; }
  .manage-row .manage-time { font-size: 10px; margin-left: 51px; padding: 4px 7px; }.manage-row > .ui-icon { display: none; }
  .help-strip { flex-wrap: wrap; gap: 14px; }.help-strip > div { flex: 1; }.help-strip .btn { margin-left: 42px; }
  .journal-grid { grid-template-columns: 1fr; gap: 25px; }.journal-editor { padding: 23px 19px; }.journal-ranges { gap: 19px; }
  .journal-editor .section-heading h2 { font-size: 20px; }.journal-save { flex-wrap: wrap; gap: 17px; }.journal-save .btn { width: 100%; }
  .journal-note { padding: 26px; }.journal-note h2 { font-size: 27px; }.journal-prompt { font-size: 14px; }.journal-note > p { font-size: 14px; }
  .journal-note .text-action { font-size: 13px; }.journal-history .section-heading { flex-wrap: wrap; gap: 7px; }
  .journal-entry { grid-template-columns: 49px minmax(0, 1fr); gap: 15px; }.journal-entry p { font-size: 14px; }
  .progress-stats { grid-template-columns: 1fr 1fr; }.progress-stats > div { padding: 22px 19px; }.progress-stats strong { font-size: 38px; }
  .progress-stats > div > span { font-size: 12px; }.progress-stats p { font-size: 11px; }.progress-grid { grid-template-columns: 1fr; gap: 0; }
  .progress-card .section-heading { flex-wrap: wrap; gap: 7px; }.progress-card .hint { font-size: 12px; }.review { padding: 24px 21px; }
  .workspace-main .display { font-size: 41px; }.settings-intro { padding: 22px; }.settings-intro h2 { font-size: 22px; }
  .you-row { flex-wrap: wrap; gap: 17px; padding: 22px 0; }.you-row .r { flex-wrap: wrap; }.you-row .btn { font-size: 12px; }
  .sheet { align-items: flex-end; padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); }.sheet-card { padding: 27px 22px; max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); }
  .sheet-h h2, .sheet-h h2.serif { font-size: 29px; }.sheet-h { padding-right: 19px; }.seg button { padding: 8px 9px; font-size: 12px; }
  .sheet-card.thread { height: 85dvh; }.line:not(.coach) { padding-top: 12vh; }.line .nav-row button { font-size: 12px; }.toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .auth-card { padding: 32px 27px; }.auth-card h1 { font-size: 36px; }
  .landing-wrap { width: calc(100% - 40px); }.landing-nav { height: 86px; gap: 16px; }.landing-nav .wordmark { font-size: 33px; }
  .landing-how { display: none; }.landing-nav > div { gap: 18px; }.login-link { font-size: 12px; }.landing-nav .btn { font-size: 12px; padding: 0 13px; min-height: 42px; }.landing-nav .btn .ui-icon { display: none; }
  .landing-hero { grid-template-columns: 1fr; gap: 31px; padding: 30px 0 46px; }.landing-kicker { font-size: 9px; letter-spacing: 1px; margin-bottom: 24px; }
  .landing-intro h1 { font-size: clamp(48px, 13.6vw, 70px); letter-spacing: -2px; margin-bottom: 23px; }.landing-lede { font-size: 16px; line-height: 1.8; }
  .landing-cta { font-size: 14px; min-height: 51px; }.landing-note { font-size: 12px; }.landing-preview { padding-top: 16px; }
  .preview-heading { margin-bottom: 21px; padding: 0 7px; }.preview-heading h2 { font-size: 39px; }.preview-heading > .ui-icon { width: 44px; height: 44px; }
  .preview-heading > div > span { font-size: 8px; }.preview-habit { padding: 18px 20px; gap: 10px; }.preview-name strong { font-size: 20px; }.preview-name small { font-size: 12px; }
  .preview-hint { font-size: 12px; }.preview-progress { font-size: 12px; }.how-layout { grid-template-columns: 1fr; gap: 34px; }
  .landing-how-section { padding: 43px 0 47px; }.how-layout h2 { font-size: 39px; letter-spacing: -1px; }.how-layout .landing-kicker { margin-top: 0; }
  .how-steps article { gap: 17px; }.how-steps h3 { font-size: 22px; }.how-steps p { font-size: 14px; }.how-steps .ui-icon { width: 23px; height: 23px; margin-left: 0; }
  .landing-footer { padding: 36px 0 23px; }.footer-invite { flex-wrap: wrap; gap: 22px; }.footer-invite h2 { font-size: 28px; }
  .footer-wordmark { font-size: 26vw; letter-spacing: -.075em; margin-top: 36px; margin-bottom: 24px; }
  .footer-small { flex-wrap: wrap; gap: 17px; font-size: 11px; }.footer-small > span:nth-child(2) { display: none; }.footer-small .ui-icon { width: 13px; height: 13px; }
}
@media (max-width: 360px) {
  .app-header-inner { padding: 0 15px; }.app-header .wordmark { font-size: 29px; }.header-actions { margin-right: 3px; }.coach-trigger { width: 35px; }.command-trigger { width: 37px; }
  .workspace-page, .workspace-main > .wrap { width: calc(100% - 28px); }.page-heading h1 { font-size: 39px; }.page-heading .btn { padding: 0 10px; font-size: 11px; }
  .summary-copy h2 { font-size: 18px; }.board-heading h2 { font-size: 19px; }.plan-filter button { font-size: 10px; padding: 0 7px; }
  section.block { padding-left: 12px; padding-right: 12px; }.h-name { font-size: 13px; }.h-meta { font-size: 11px; }.block-head h2 { font-size: 19px; }
  .landing-wrap { width: calc(100% - 32px); }.landing-nav > div { gap: 13px; }.landing-nav .wordmark { font-size: 30px; }.landing-nav .btn { font-size: 11px; padding: 0 10px; }
  .landing-intro h1 { font-size: 45px; }.preview-name strong { font-size: 18px; }.preview-habit { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .app-header, .mobile-nav, .line, .workspace-foot { display: none !important; }.workspace-main { margin-left: 0; }.workspace-page { width: 100%; } }