/* Beta 0.6 — shared readable tokens and quiet, consistent controls. */
:root { --muted:#bdcbe0; --faint:#a9b9d0; --read-size:1.0625rem; --label-size:.9375rem; }
html[data-theme="light"] { --muted:#425571; --faint:#52627b; --green:#087c50; --red:#bd324a; }
html[data-font-size="Small"] { --read-size:1rem; --label-size:.875rem; }
html[data-font-size="Large"] { --read-size:1.1875rem; --label-size:1.0625rem; }
html[data-font-size] body { font-size:var(--read-size); line-height:1.6; }
html[data-font-size] :is(button,input,select,textarea) { font-family:inherit; font-size:var(--read-size); line-height:1.45; }
html[data-font-size] :is(.field>span,.filter-field,.toggle-line,.plan-summary strong,.goal-analytics-grid span,.day-review-grid span,.working-hours-control label,.form-feedback,.dialog-copy,.custom-repeat-row>span) { font-size:var(--label-size); line-height:1.5; }
html[data-font-size] .filter-field { text-transform:none; letter-spacing:normal; }
html[data-font-size] .sync-status { font-size:.875rem; }
html[data-font-size] :is(.page-subtitle,.section-card p,.panel p,.setting-copy span,.setting-note,.full-task-copy p,.task-row-details>p,.timeline-copy p,.journal-entry p,.auth-footnote,.auth-feedback,.auth-field span,.chart-summary,.insight-card p) { font-size:var(--read-size); line-height:1.6; }
html[data-font-size] :is(.page small,dialog small,.sidebar small,.task-meta,.category-tag,.priority-chip,.status-pill,.task-total,.task-tab b,.deadline-copy span,.widget-kicker,.summary-mini span,.plan-summary span,.stat-card span,.data-table th,.data-table td,.notification-row small,.goal-card small,.goal-card time,.goal-type-badge,.focus-sound-status) { font-size:var(--label-size); line-height:1.5; }
html[data-font-size] :is(.nav-item,.settings-nav button,.action-menu button,.prompt-chip,.task-start-button,.task-start-button b,.setting-copy strong,.subtask-quick-item,.full-task-copy h3,.timeline-copy h3) { font-size:var(--read-size); line-height:1.45; }
html[data-font-size] :is(.section-heading h2,.panel-heading h2,.settings-card h2) { font-size:1.375rem; }
html[data-font-size] :is(.calendar-task,.scheduled-block,.time-label,.day-number,.calendar-weekdays span,.mini-days button,.week-head) { font-size:var(--label-size); }
html[data-font-size] .mobile-bottom-nav button small { font-size:.875rem; }
.auth-account-note,.muted-note { color:var(--muted); }
.muted-note { margin:14px 0 0; font-size:var(--label-size); }
button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.side-nav { gap:5px; }
.side-nav .nav-item { min-height:45px; }
.sidebar { overflow-y:auto; scrollbar-width:thin; }
.reward-star { display:inline-block; flex:none; width:22px; height:22px; background:currentColor; clip-path:polygon(50% 2%,64% 34%,99% 38%,73% 62%,80% 97%,50% 79%,20% 97%,27% 62%,1% 38%,36% 34%); }
.daylight-mark { display:inline-block; flex:none; width:25px; height:25px; background:currentColor; mask:url('./daylight.svg') center/contain no-repeat; -webkit-mask:url('./daylight.svg') center/contain no-repeat; color:var(--green); }
.ai-icon.daylight-brand-icon { background:linear-gradient(140deg,color-mix(in srgb,var(--blue) 24%,var(--panel)),color-mix(in srgb,var(--green) 16%,var(--panel))); }
.ai-icon.daylight-brand-icon .daylight-mark { width:38px; height:38px; }
.connection-banner { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 18px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel); color:var(--text); margin:16px 0; }
.connection-banner[hidden] { display:none; }
.connection-banner>span { flex:1 1 300px; }
.notice-card { padding:16px 20px; border:1px solid var(--line-strong); border-radius:14px; background:var(--panel-strong); }
.xp-total { display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:100px; background:color-mix(in srgb,var(--blue) 15%,var(--panel)); color:var(--text); font-weight:750; }
.xp-total .reward-star { color:var(--amber); }
.reward-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; margin-bottom:24px; background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 13%,var(--panel)),var(--panel)); }
.reward-intro h2 { margin:5px 0 12px; font-size:1.65rem; }
.reward-intro p { max-width:68ch; }
.reward-intro button { flex:none; }
.reward-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.reward-card { border:1px solid var(--line-strong); border-radius:24px; background:var(--panel); padding:28px; min-width:0; }
.reward-card.earned { border-color:color-mix(in srgb,var(--green) 35%,var(--line)); }
.reward-card-head { display:flex; align-items:center; justify-content:space-between; }
.reward-emblem { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:var(--panel-strong); color:var(--muted); }
.earned .reward-emblem { background:var(--green-soft); color:var(--green); }
.reward-emblem .reward-star { width:29px; height:29px; }
.reward-level { font-size:2rem; font-weight:750; font-variant-numeric:tabular-nums; }
.reward-level small { color:var(--muted); }
.reward-card h2 { margin:22px 0 8px; font-size:1.4rem; }
.reward-card p { color:var(--muted); min-height:3.2em; }
.reward-progress-copy { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; margin:24px 0 10px; }
.reward-progress-copy>span { color:var(--muted); font-size:var(--label-size); }
.reward-card progress { width:100%; height:9px; display:block; appearance:none; border:0; border-radius:20px; overflow:hidden; background:var(--panel-strong); accent-color:var(--green); }
.reward-card progress::-webkit-progress-bar { background:var(--panel-strong); }
.reward-card progress::-webkit-progress-value { background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:20px; transition:width .4s ease; }
.reward-card progress::-moz-progress-bar { background:var(--green); }
.reward-milestones { margin-top:24px; }
summary { cursor:pointer; padding:10px 0; color:var(--text); font-weight:650; }
.reward-milestones ol { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:5px; }
.reward-milestones li { display:flex; align-items:center; gap:12px; padding:9px 0; color:var(--muted); border-top:1px solid var(--line); }
.reward-milestones li>span:first-child { width:25px; text-align:center; }
.reward-milestones small { margin-left:auto; }
.reward-milestones .unlocked { color:var(--green); }
.weekly-forecast { padding:24px; margin-bottom:24px; }
.weekly-forecast .section-heading button { flex:none; }
.forecast-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; padding:18px 0 10px; }
.forecast-day { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0; padding:12px 6px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text); cursor:pointer; }
.forecast-day:hover { background:var(--panel-hover); border-color:var(--line-strong); }
.forecast-day strong,.forecast-day>span,.forecast-day small { text-align:center; font-size:var(--label-size); }
.forecast-day small { color:var(--muted); }
.forecast-bar-track { height:96px; display:flex; flex-direction:column; justify-content:flex-end; margin:0 16%; background:var(--panel-strong); border-radius:7px; overflow:hidden; }
.forecast-bar-track i { background:var(--blue); border-radius:7px; min-height:2px; }
.forecast-day.busy i { background:var(--amber); }
.forecast-advice { margin-top:20px; padding:20px; border-radius:16px; background:var(--panel-strong); border-left:3px solid var(--green); }
.analytics-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.analytics-summary .stat-card { min-width:0; padding:22px; }
.analytics-summary .stat-card strong { font-size:2rem; margin:8px 0; }
.metric-explanation { margin:16px 0 24px; padding:4px 20px; border:1px solid var(--line); border-radius:14px; }
.metric-explanation p { color:var(--muted); max-width:90ch; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:24px; align-items:start; }
.analytics-grid>.section-card { padding:24px; min-width:0; }
.analytics-chart { display:flex; gap:12px; height:275px; overflow-x:auto; padding:15px 3px 8px; scrollbar-width:thin; }
.analytics-bar { min-width:62px; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; font-size:.875rem; }
.analytics-bar strong { white-space:nowrap; }
.analytics-bar>span { white-space:nowrap; color:var(--muted); }
.analytics-bar-track { height:170px; width:34px; display:flex; align-items:flex-end; border-radius:8px; background:var(--panel-strong); overflow:hidden; }
.analytics-bar-track i { width:100%; background:linear-gradient(var(--green),var(--blue)); border-radius:8px; min-height:2px; animation:bar-rise .45s ease both; transform-origin:bottom; }
.comparison-row { display:grid; grid-template-columns:1fr auto; gap:6px; padding:18px 0; border-bottom:1px solid var(--line); }
.comparison-row small { grid-column:1/-1; color:var(--muted); }
.comparison-card h3 { margin-top:28px; }
.comparison-card p,.comparison-card>small { color:var(--muted); }
.comparison-card p strong { color:var(--text); }
.focus-history { padding:24px; margin-top:24px; }
.focus-history ul { list-style:none; padding:0; }
.focus-history li { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:15px 0; border-top:1px solid var(--line); }
.focus-history li>span { display:flex; flex-direction:column; gap:4px; }
.focus-history small { color:var(--muted); }
.help-step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.help-step { padding:26px; display:flex; flex-direction:column; align-items:flex-start; }
.step-number { color:var(--blue); font-size:1.5rem; font-weight:750; }
.help-step h2 { margin:12px 0; }
.help-step p { color:var(--muted); flex:1; }
.help-step button { margin-top:10px; }
.install-guide { padding:26px; margin-top:24px; }
.install-guide p { max-width:85ch; color:var(--muted); }
.faq-panel { margin-bottom:24px; padding:26px; }
.faq-panel details { border-top:1px solid var(--line); padding:7px 0; }
.faq-panel p { padding:0 0 12px; color:var(--muted); max-width:85ch; }
.faq-panel>button { margin-top:16px; }
/* One track and one thumb shared by both pages, with a 44px touch target. */
.settings-page .toggle.planner-switch,.planner-page .toggle.planner-switch { position:relative; display:inline-block; width:54px; height:32px; flex:0 0 54px; }
.settings-page .toggle.planner-switch input,.planner-page .toggle.planner-switch input { position:absolute; inset:-6px 0; width:54px; height:44px; opacity:0; z-index:3; margin:0; }
.settings-page .toggle.planner-switch>span,.planner-page .toggle.planner-switch>span { position:absolute; inset:0; width:54px; height:32px; border-radius:999px; background:#a53d51; border:1px solid transparent; transform:none; transition:background .25s ease; }
.settings-page .toggle.planner-switch>span::after,.planner-page .toggle.planner-switch>span::after { content:""; position:absolute; inset:3px auto auto 3px; width:24px; height:24px; border-radius:50%; background:white; transform:translateX(0); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.settings-page .toggle.planner-switch input:checked+span,.planner-page .toggle.planner-switch input:checked+span { background:#179e6c; }
.settings-page .toggle.planner-switch input:checked+span::after,.planner-page .toggle.planner-switch input:checked+span::after { transform:translateX(22px); }
.setting-row { min-height:78px; gap:22px; }
.setting-copy { min-width:0; }
.setting-control { flex-shrink:0; }
/* Chat content enters once per response; old bubbles stay still. */
.chat-messages { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:24px; }
html[data-font-size] .chat-message { max-width:92%; margin:0; padding:17px 20px; border:1px solid var(--line-strong); border-radius:20px 20px 20px 5px; background:var(--panel-strong); color:var(--text); font-size:var(--read-size); line-height:1.65; overflow-wrap:anywhere; }
html[data-font-size] .chat-message.user { align-self:flex-end; border-radius:20px 20px 5px 20px; background:color-mix(in srgb,var(--blue) 24%,var(--panel)); border-color:color-mix(in srgb,var(--blue) 45%,var(--line)); color:var(--text); }
.chat-speaker { display:flex; align-items:center; gap:7px; font-size:var(--label-size); font-weight:700; margin-bottom:8px; color:var(--muted); }
.chat-speaker .daylight-mark { width:17px; height:17px; }
.chat-message p { margin:0 0 12px; }
.chat-message p:last-child { margin-bottom:0; }
.chat-message.chat-latest { animation:bubble-enter .32s cubic-bezier(.22,1,.36,1) both; }
.chat-retry { border:1px solid var(--red); border-radius:16px; padding:16px; width:100%; }
.chat-compose input { min-width:0; }
.focus-session-dialog:fullscreen,.focus-session-dialog.phone-focus { width:100vw; height:100dvh; max-width:none; max-height:none; border-radius:0; }
.focus-session-top { flex-wrap:wrap; gap:12px; }
@keyframes bubble-enter { from {opacity:0; transform:translateY(9px) scale(.98)} to {opacity:1; transform:none} }
@keyframes bar-rise { from {transform:scaleY(0)} to {transform:scaleY(1)} }
@media(max-width:1100px) { .analytics-grid { grid-template-columns:1fr; } .analytics-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .reward-grid,.help-step-grid { grid-template-columns:1fr; }
  .reward-intro { flex-direction:column; align-items:flex-start; padding:22px; }
  .reward-card { padding:22px; }
  .weekly-forecast { padding:18px; }
  .weekly-forecast .section-heading { flex-direction:column; align-items:stretch; gap:16px; }
  .forecast-chart { gap:4px; overflow-x:auto; }
  .forecast-day { min-width:48px; padding:8px 2px; }
  .forecast-day strong,.forecast-day small { font-size:.8125rem; }
  .forecast-bar-track { height:78px; margin:0 14%; }
  .analytics-summary { gap:10px; }
  .analytics-summary .stat-card { padding:16px; }
  .analytics-summary .stat-card strong { font-size:1.8rem; }
  .analytics-grid>.section-card,.focus-history,.faq-panel { padding:20px; }
  .analytics-grid .section-heading { flex-wrap:wrap; gap:12px; }
  .chat-messages { padding:16px; }
  html[data-font-size] .chat-message { max-width:96%; padding:15px 17px; }
  .setting-control { max-width:100%; }
  .connection-banner { margin:12px 0; padding:14px; }
  .focus-history li { align-items:flex-start; }
  .focus-history li b { white-space:nowrap; }
  .mobile-bottom-nav { grid-template-columns:1.25fr 1fr 1fr 1.15fr .9fr; }
  html[data-font-size] .mobile-bottom-nav button small { font-size:.8125rem; letter-spacing:-.02em; text-overflow:clip; }
  .plan-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .planner-controls { max-height:850px; }
}
@media(prefers-reduced-motion:reduce) {
  .chat-message.chat-latest,.analytics-bar-track i { animation:none; }
  .planner-switch>span,.planner-switch>span::after { transition:none!important; }
}
html.reduced-motion .chat-message.chat-latest,html.reduced-motion .analytics-bar-track i { animation:none; }
html.reduced-motion .planner-switch>span,html.reduced-motion .planner-switch>span::after { transition:none!important; }