:root {
  --ink: #292b2f; --muted: #6d7076; --border: #eeeeef;
  --paper: #fff; --canvas: #fff; --accent: #3f4247;
  --chrome: #fff; --on-chrome: #717378;
  --controls: #fff; --rail: #fff; --rail-header: #fafafa;
  --ruler: #fafafa; --boundary: #e7e7e9; --past: #f4f4f5; --current: #f8f8f8;
  --head: 184px; --radius: 8px; --ease: cubic-bezier(.2,.7,.2,1);
  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
  color: var(--ink); background: var(--canvas); font-synthesis: none;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-header { flex-shrink: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; background: transparent; color: inherit; }
button, input, textarea, select {
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), opacity 160ms var(--ease);
}
button:disabled { cursor: default; opacity: .35; }
button:not(:disabled):active { transform: scale(.97); }
button, a, input, textarea, select { outline-offset: 3px; }
button:focus-visible, a:focus-visible { outline: 2px solid #65676b80; }
input:focus, textarea:focus, select:focus { outline: 2px solid #65676b55; outline-offset: 1px; }
input, textarea { color: var(--ink); }
svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
[hidden] { display: none !important; }

.save-status { padding: 4px 2px; border-radius: 5px; font-size: 10px; color: var(--on-chrome); white-space: nowrap; }
.save-status:disabled { opacity: 1; cursor: default; }
.save-status::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin-right: 7px; border-radius: 50%; background: #a1a3a7;
}
.save-status.error { color: #bc5365; cursor: pointer; }
.save-status.error::before { background: currentColor; }
.save-status.saving::before { background: #bc9767; animation: save-pulse 1s ease-in-out infinite; }
@keyframes save-pulse { 50% { opacity: .4; } }

main { flex: 1; min-height: 0; padding: 0 24px; overflow: hidden; }
#surface { height: 100%; }
.workspace-toolbar {
  display: grid; grid-template-columns: max-content minmax(0,1fr) max-content; align-items: center;
  gap: 20px; min-height: 68px; padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.period-navigation, .toolbar-actions { display: flex; align-items: center; gap: 8px; }
.toolbar-actions { justify-content: flex-end; }
h1 { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; margin: 0 5px; font-variant-numeric: tabular-nums; }
.location-button { padding: 9px 10px; border-radius: 8px; font-size: 11px; color: #787c83; white-space: nowrap; }
.location-button:hover { background: #f4f5f6; color: #33373e; }
.page-button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #e7e9ed; border-radius: 9px; background: #fff; font-size: 11px; white-space: nowrap; }
.page-button svg { width: 14px; height: 14px; color: #858a94; }
.page-button:hover { background: #f6f7f9; border-color: #d5d9e0; }
.tool-icon { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 8px; color: #696e78; }
.tool-icon svg { width: 17px; height: 17px; }
.tool-icon:hover:not(:disabled) { background: #f3f4f6; color: #252a32; }
.tool-icon:disabled { opacity: .3; }
.toolbar-actions .primary-button { padding: 9px 12px; font-size: 11px; }
.primary-button svg { width: 15px; height: 15px; }
.arrow-group { display: flex; gap: 2px; padding: 3px; background: #f4f4f5; border-radius: 9px; }
.icon-button {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-button:hover:not(:disabled) { background: white; box-shadow: 0 1px 3px #0000000b; }
.icon-button svg { width: 17px; height: 17px; }
.quiet-button {
  font-size: 12px; padding: 9px 13px; border: 1px solid var(--border);
  border-radius: 10px; background: white; white-space: nowrap;
}
.quiet-button:hover:not(:disabled) { background: #f5f5f6; border-color: #dadbdd; }
.primary-button {
  font-size: 12px; background: var(--accent); color: white;
  padding: 10px 16px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.primary-button:hover { background: #292c31; }
.primary-button span { font-size: 17px; line-height: 1; }

/* The fixed sidebar and scrolling chart are sibling components. */
.timeline-shell {
  display: grid; grid-template-columns: var(--head) minmax(0,1fr);
  height: 100%;
  border: 0; border-radius: 0;
  background: white; overflow: hidden;
}
.track-sidebar {
  min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--rail); overflow: hidden;
  position: relative; z-index: 15;
}
.head-label {
  height: var(--ruler-height); flex-shrink: 0; padding: 12px 18px;
  background: var(--rail-header); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 650;
}
.track-head-viewport { flex: 1; min-height: 0; overflow: hidden; }
.track-head, .track-row, .todo {
  --track-wash: oklch(from var(--track) .977 min(.012, calc(c * .12)) h);
  --item-fill: oklch(from var(--track) .89 min(.085, calc(c * .65)) h);
  --item-rest: oklch(from var(--track) .963 min(.025, calc(c * .22)) h);
  --item-edge: oklch(from var(--track) .845 min(.075, calc(c * .60)) h);
  --item-ink: oklch(from var(--track) .32 min(.07, calc(c * .55)) h);
  --item-muted: oklch(from var(--track) .43 min(.05, calc(c * .40)) h);
}
.track-head { padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb,var(--track) 12%,white); background: var(--track-wash); transition: background-color 160ms var(--ease); }
.track-head:hover { background: oklch(from var(--track) .963 min(.018, calc(c * .16)) h); }
.track-title-row { display: flex; align-items: center; gap: 10px; }
.color-picker { position: relative; width: 12px; height: 28px; flex-shrink: 0; display: flex; align-items: center; }
.color-picker::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--track); pointer-events: none; }
.color-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.track-name { width: 100%; min-width: 0; border: 0; padding: 4px 0; background: transparent; font-weight: 650; font-size: 13px; border-radius: 4px; }
.track-operations { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-left: 22px; margin-top: 2px; }
.track-operations small { font-size: 11px; color: var(--muted); }
.track-delete { width: 28px; height: 28px; color: #8d8f94; border-radius: 6px; display: grid; place-items: center; opacity: .4; }
.track-head:hover .track-delete, .track-delete:focus-visible { opacity: 1; }
.track-delete:hover { background: #fff0f3; color: #bc5365; }
.track-delete svg { width: 15px; height: 15px; }
.timeline-scroll {
  min-width: 0; min-height: 0; overflow: auto;
  scrollbar-width: thin; scrollbar-color: #d6d7da transparent;
  overscroll-behavior: contain; touch-action: pan-y;
}
.timeline-canvas { position: relative; min-height: 100%; isolation: isolate; }
.timeline-header { display: flex; height: var(--ruler-height); position: sticky; top: 0; z-index: 12; background: var(--ruler); border-bottom: 1px solid var(--border); }
.time-heading {
  width: var(--unit); min-width: var(--unit);
  display: flex; align-items: center; justify-content: space-between; padding: 0 15px;
  gap: 8px; font-size: 12px; font-weight: 500; position: relative;
  font-variant-numeric: tabular-nums;
}
.time-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.column-hours { font-size: 10px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.time-heading small { font-size: 10px; color: var(--muted); }
.time-heading:hover { background: #f0f0f1; }
.time-heading:active { transform: none !important; }
.time-heading.current { color: var(--ink); background: #f0f0f1; font-weight: 650; }
.time-heading.current small { color: var(--accent); }
.past { background: var(--past); }
.time-heading.past { color: #8a8c91; }
.page-start { border-left: 1px solid #dedee1; }
.track-row { position: relative; border-bottom: 1px solid color-mix(in srgb,var(--track) 12%,white); background: var(--track-wash); }
.track-area { position: relative; width: var(--time-width); height: 100%; cursor: grab; }
.timeline-scroll.panning, .timeline-scroll.panning .track-area { cursor: grabbing; }
.grid-columns { display: flex; position: absolute; inset: 0; pointer-events: none; }
.grid-column { width: var(--unit); min-width: var(--unit); height: 100%; border-right: 1px solid #00000004; }
.grid-column.past { background: #00000003; }
.grid-column.current { background: transparent; }
.empty-ruler { display: flex; position: absolute; top: var(--ruler-height); bottom: 0; left: 0; pointer-events: none; }
.add-cell {
  position: absolute; bottom: 3px; left: calc(var(--column) * var(--unit) + 8px);
  width: calc(var(--unit) - 16px); height: 21px; padding-left: 6px; border-radius: 5px;
  font-size: 10px; text-align: left; color: var(--muted); opacity: 0;
  white-space: nowrap; overflow: hidden;
}
.track-area:hover .add-cell { opacity: .5; }
.add-cell:hover, .add-cell:focus-visible { background: #00000004; color: var(--ink); opacity: 1; }
.plan-projection {
  position: absolute; top: calc(var(--item-top) - 3px); left: var(--item-left); width: var(--item-width); height: calc(var(--item-height) + 6px);
  border: 1px solid #7379831a; border-radius: 9px;
  background: oklch(from var(--track) .945 min(.008, calc(c * .06)) h);
  z-index: 1; pointer-events: none; overflow: hidden;
  transition: top 170ms var(--ease);
}
.projection-header { height: 23px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 0; max-width: 100%; pointer-events: auto; }
.projection-title { min-width: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; color: #626871; }
.projection-due { flex-shrink: 0; font-size: 10px; color: #626871; white-space: nowrap; }
.gantt-item {
  position: absolute; top: var(--item-top); left: var(--item-left); width: var(--item-width); height: var(--item-height);
  border: 1px solid var(--item-edge);
  background: var(--item-rest); border-radius: 7px;
  box-shadow: 0 1px 2px #181a2018, 0 3px 8px #181a200e;
  z-index: 2; container-type: inline-size;
  cursor: grab; touch-action: none;
  transition: top 220ms var(--ease), height 220ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.gantt-item:focus-visible { outline: 2px solid var(--item-muted); outline-offset: 2px; }
.gantt-item input, .gantt-item textarea { cursor: text; }
.gantt-item.reordering { z-index: 8; cursor: grabbing; transition: none; box-shadow: 0 3px 8px #181a2020, 0 8px 20px #181a2016; }
.gantt-item.moving { z-index: 8; cursor: ew-resize; transition: none; }
.track-area.reordering { cursor: grabbing; }
.gantt-item:hover, .gantt-item:focus-within {
  border-color: oklch(from var(--track) .75 min(.10, calc(c * .70)) h);
  box-shadow: 0 1px 3px #181a201a, 0 4px 10px #181a2010;
}
.item-progress { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 6px; pointer-events: none; z-index: -1; }
.item-progress-unit { position: relative; width: var(--unit); min-width: var(--unit); height: 100%; }
.item-progress-unit span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--item-fill); }
.item-topbar {
  position: relative; z-index: 3; overflow: hidden;
  display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 3px;
}
.item-heading { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.item-title { min-width: 0; flex: 1; height: 20px; border: 0; padding: 0; line-height: 20px; background: transparent; font-size: 13px; font-weight: 600; color: var(--item-ink); border-radius: 3px; }
.item-heading.has-ancestry .item-title { field-sizing: content; flex: 0 1 auto; width: auto; min-width: 3em; max-width: 65%; text-overflow: ellipsis; }
.item-ancestry { flex: 1; min-width: 0; font-size: 11px; font-weight: 400; color: #777a81; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancestor-link { color: inherit; font: inherit; border: 0; padding: 2px 0; background: transparent; }
.ancestor-link:hover { color: #333; text-decoration: underline; text-underline-offset: 3px; }
.navigation-highlight { animation: locate-task 1.6s ease-out; }
@keyframes locate-task { 0%, 35% { outline: 2px solid #8a8d94; outline-offset: 4px; } 100% { outline-color: transparent; outline-offset: 7px; } }
.item-title::placeholder { color: var(--muted); font-weight: 400; }
.item-due { font-size: 10px; color: var(--item-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-parent { color: var(--item-muted); width: 12px; height: 12px; opacity: .65; }
.item-delete { width: 20px; height: 20px; padding: 0; border-radius: 4px; display: grid; place-items: center; font-size: 16px; color: var(--muted); flex-shrink: 0; opacity: 0; }
.gantt-item:hover .item-delete, .gantt-item:focus-within .item-delete { opacity: 1; }
.item-delete:hover { background: #ffffffa0; color: #bc5365; }
.item-cells { display: flex; height: 30px; overflow: visible; }
.item-cell { position: relative; min-width: var(--unit); width: var(--unit); padding: 3px 9px 5px; }
.cell-input { display: block; width: 100%; height: 22px; min-width: 0; border: 0; background: transparent; color: var(--item-ink); font-size: 12px; line-height: 20px; padding: 0 17px 0 0; border-radius: 3px; resize: none; text-overflow: ellipsis; }
.cell-input::placeholder { color: var(--item-muted); opacity: .7; }
.cell-input:disabled { opacity: .5; }
.resize-handle { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 4; touch-action: none; }
.resize-handle.left { left: -6px; }
.resize-handle.right { right: -6px; }
.gantt-item.resizing { border-color: var(--track); }
.now-line { position: absolute; top: 0; bottom: 0; left: var(--now-left); width: 1px; background: #d85663; z-index: 7; pointer-events: none; }
.now-line::before { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #d85663; }
.timeline-empty { position: absolute; top: 155px; left: 32px; max-width: 440px; z-index: 1; }
.timeline-empty h2 { font-size: 19px; font-weight: 500; margin: 0 0 13px; }
.timeline-empty p { font-size: 13px; line-height: 1.9; color: var(--muted); margin: 0; }
.timeline-empty button { margin-top: 22px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #393b3f; color: white; padding: 12px 20px; border-radius: 8px; font-size: 12px; z-index: 30; max-width: 90vw; box-shadow: 0 5px 20px #00000020; }

.journal { max-width: 900px; margin: 0 auto; padding: 32px 44px; background: white; min-height: 100%; }
.journal-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.journal-heading h2 { font-size: 28px; margin: 0; font-weight: 500; }
.journal-heading h2 small { font-size: 12px; color: var(--muted); margin-left: 12px; font-weight: 400; }
.journal-progress { font-size: 11px; color: var(--muted); margin-top: 15px; }
.journal-section { margin-top: 24px; }
.journal-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.routine-document, .reflection-document, .expenses-document { display: block; width: 100%; resize: none; border: 0; border-radius: 6px; background: transparent; padding: 4px 0; font-size: 15px; line-height: 1.9; overflow: hidden; }
.routine-document, .expenses-document { min-height: 96px; }
.reflection-document { min-height: 120px; }
.reflection-document::placeholder { color: #8b8d91; }
.reflection-section, .expenses-section { padding-top: 20px; border-top: 1px solid var(--border); }
.task-section { --todo-name-share: .35; }
.routine-section { padding-top: 20px; border-top: 1px solid var(--border); }
.expense-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; font-weight: 400; }
.expense-total, .expense-warning { border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 3px; border-radius: 5px; }
.expense-total { font-variant-numeric: tabular-nums; }
.expense-total:hover, .expense-warning:hover { background: #f3f3f3; color: #333; }
.expense-warning, .expense-incomplete { color: #896b3e; font-size: 12px; }
.expense-review { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.expense-review-heading, .expense-day-heading { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.expense-review-heading > span, .expense-day-heading > span { margin-left: auto; color: var(--muted); }
.expense-day { display: block; text-align: left; width: 100%; padding: 14px 10px; border: 0; border-bottom: 1px solid #eee; background: transparent; border-radius: 6px; }
.expense-day:hover { background: #f8f8f8; }
.expense-original { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; margin-top: 7px; color: #62656a; }
.expense-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }
.section-caption { font-size: 10px; color: var(--muted); font-weight: 400; margin-left: auto; }
.todo-column-labels { display: grid; grid-template-columns: calc((100% + 17px) * var(--todo-name-share) + 24px) 1fr; margin-left: 43px; margin-bottom: 7px; font-size: 10px; color: #909297; }
.todo { display: flex; align-items: center; gap: 12px; min-height: 63px; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--item-edge); border-radius: 7px; background: var(--item-fill); color: var(--item-ink); }
.todo.done {
  --item-fill: oklch(from var(--track) .964 min(.018, calc(c * .14)) h);
  --item-edge: oklch(from var(--track) .92 min(.018, calc(c * .14)) h);
  --item-ink: oklch(from var(--track) .48 min(.03, calc(c * .25)) h);
  --item-muted: oklch(from var(--track) .52 min(.02, calc(c * .18)) h);
}
.todo input[type=checkbox] { appearance: none; border: 1px solid var(--item-muted); background: white; width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; cursor: pointer; margin: 0; }
.todo-check { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; min-height: 36px; margin: -6px; cursor: pointer; }
.stop-daily { font-size: 11px; padding: 6px 4px; }
.recurring-composer { flex-wrap: wrap; align-items: center; }
.recurring-start { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.recurring-start input { max-width: 146px; }
.recurring-management { margin-top: 16px; font-size: 12px; color: var(--muted); }
.recurring-management summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.recurring-setting { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.recurring-setting > span { margin-right: auto; color: #555; }
.recurring-setting small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.recurring-setting button { font-size: 11px; }
.delete-history:hover { color: #985b54; }
.todo input[type=checkbox]:checked { background: var(--track); border-color: var(--track); position: relative; }
.todo.done input[type=checkbox]:checked { background: var(--item-muted); border-color: var(--item-muted); }
.todo input[type=checkbox]:checked::after { content: '✓'; color: white; position: absolute; left: 2px; top: -3px; font-size: 15px; }
.todo-name { flex: 0 0 calc(var(--todo-name-share) * 100%); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.todo-title { border: 0; width: 100%; min-width: 0; font-size: 14px; line-height: 1.6; padding: 0; border-radius: 3px; background: transparent; color: var(--item-ink); }
.todo.done .todo-title { text-decoration: line-through; color: var(--item-ink); }
.todo-theme { font-size: 10px; color: var(--item-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.todo-note { flex: 1; min-width: 0; min-height: 36px; background: transparent; border: 0; padding: 7px 12px; font-size: 13px; line-height: 1.6; color: var(--item-ink); resize: none; overflow: hidden; }
.todo-note::placeholder { color: var(--item-muted); opacity: .7; }
.todo button { opacity: .5; }
.todo:hover button, .todo:focus-within button { opacity: 1; }
.todo .item-delete { color: var(--item-muted); }
.journal-empty { padding: 14px 0; font-size: 13px; line-height: 1.9; color: var(--muted); margin-bottom: 16px; }
.task-divider { border: 0; border-top: 1px solid var(--border); margin: 17px 0; }
.daily-add, .recurring-composer { display: flex; gap: 8px; margin-top: 15px; }
.daily-add input, .recurring-composer input { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; min-width: 0; flex: 1; font-size: 12px; }
.recurring-composer select { border: 1px solid var(--border); border-radius: 9px; padding: 6px 8px; background: white; max-width: 130px; font-size: 12px; }
.recurring-composer { padding-top: 12px; }
.error-surface { padding: 70px; text-align: center; background: white; border: 1px solid var(--border); border-radius: var(--radius); }
.error-surface p { color: var(--muted); font-size: 14px; }

@container (max-width:180px) {
  .item-parent { display: none; }
  .item-due { display: none; }
  .item-topbar { padding: 0 3px; gap: 3px; }
  .item-delete { width: 16px; }
  .item-title { font-size: 12px; }
}
@media (max-width:900px) {
  main { padding: 0 20px; }
  .journal { padding: 30px 34px; }
}
body[data-view=journal] main { overflow: auto; }
body[data-view=journal] #surface { height: auto; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.cell-tools { position: absolute; top: -32px; right: 9px; display: flex; align-items: center; gap: 9px; height: 18px; z-index: 5; }
.cell-hours { position: relative; display: flex; align-items: center; height: 18px; opacity: 0; transition: opacity 140ms var(--ease); }
.item-cell:hover .cell-hours, .item-cell.is-hovered .cell-hours, .item-cell:focus-within .cell-hours, .cell-hours[data-filled=true] { opacity: 1; }
.cell-check { opacity: 0; transition: opacity 140ms var(--ease); cursor: pointer; }
.item-cell:hover .cell-check, .item-cell.is-hovered .cell-check, .item-cell:focus-within .cell-check { opacity: 1; }
.cell-hours, .cell-check { pointer-events: none; }
.item-cell:is(:hover,.is-hovered,:focus-within) :is(.cell-hours,.cell-check), .cell-hours[data-filled=true] { pointer-events: auto; }
.cell-check input { appearance: none; margin: 0; width: 12px; height: 12px; border: 1px solid var(--item-muted); border-radius: 3px; background: transparent; cursor: pointer; }
.cell-check input:checked, .cell-check input:indeterminate { background: var(--item-muted); position: relative; }
.cell-check input:checked::after { content: '✓'; color: white; position: absolute; top: -3px; left: 1px; font-size: 10px; }
.cell-check input:indeterminate::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 1px; background: white; }
.item-cell[data-idle-state=true] .cell-input { color: var(--item-muted); }
.cell-tool { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 18px; min-width: 24px; padding: 1px 5px; border: 1px solid var(--item-edge); border-radius: 5px; background: var(--item-rest); color: var(--item-muted); font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-check, .hours-tag { position: relative; }
.cell-check::before, .hours-tag::before { content: ''; position: absolute; inset: -5px -4px; }
.hours-tag[aria-disabled=true] { cursor: help; }
.hours-tag[data-partial=true] { text-decoration: underline dotted; text-underline-offset: 3px; }
.hours-tag:hover:not([aria-disabled=true]) { background: white; }
.hours-input { width: 62px; background: white; }
.hours-input::-webkit-inner-spin-button, .hours-input::-webkit-outer-spin-button { appearance: none; margin: 0; }

.zoom-navigation { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.zoom-navigation input { appearance: none; width: 100px; height: 24px; margin: 0; background: transparent; border-radius: 6px; cursor: ew-resize; }
.zoom-navigation input::-webkit-slider-runnable-track { height: 3px; background: #e2e4e9; border-radius: 4px; }
.zoom-navigation input::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #777c86; box-shadow: 0 0 0 2px white; }
.zoom-navigation input::-moz-range-track { height: 3px; background: #e2e4e9; border-radius: 4px; }
.zoom-navigation input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: #777c86; }
#scale-label { min-width: 96px; font-variant-numeric: tabular-nums; }
.timeline-scroll { overflow-x: hidden; overflow-y: auto; touch-action: none; }
.timeline-canvas { width: 100%; overflow: clip; }
.timeline-header { display: block; overflow: hidden; }
.time-heading { position: absolute; top: 0; bottom: 0; min-width: 0; border-left: 1px solid #00000006; overflow: hidden; container-type: inline-size; }
.time-heading:hover { background: transparent; }
.track-area { width: 100%; overflow: clip; }
.axis-past { position: absolute; left: 0; top: 0; bottom: 0; background: #000000035; pointer-events: none; }
.axis-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--day-width) - 1px), #00000004 calc(var(--day-width) - 1px), #00000004 var(--day-width)); background-position-x: var(--grid-offset); pointer-events: none; }
.item-progress, .item-cells { position: absolute; left: 0; right: 0; display: block; }
.item-progress-unit { position: absolute; top: 0; bottom: 0; min-width: 0; }
.item-progress-unit span { top: 0; bottom: 0; height: 100%; }
.item-cells { top: 26px; height: 24px; z-index: 4; opacity: 1; visibility: visible; transition: opacity 160ms var(--ease), visibility 0s; }
.item-cell { position: absolute; top: 0; min-width: 0; padding: 1px 9px; border-left: 1px solid #52607124; }
.item-cell:first-child { border-left: 0; }
.cell-input { padding-right: 0; }
.cell-tools { top: -40px; }
.is-collapsed .item-cells { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms var(--ease), visibility 0s 220ms; }
.cell-input, .leaf-day-label { clip-path: inset(0); transition: clip-path 220ms var(--ease), opacity 160ms var(--ease); }
.is-collapsed :is(.cell-input,.leaf-day-label) { clip-path: inset(0 0 100% 0); opacity: 0; }
.fold-toggle { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 20px; padding: 0; line-height: 1; color: var(--item-muted); border-radius: 3px; }
.fold-toggle svg { display: block; width: 12px; height: 12px; transition: transform 180ms var(--ease); }
.item-topbar > .item-delete { width: 18px; height: 20px; line-height: 1; }
.item-topbar > .item-delete svg { display: block; width: 12px; height: 12px; }
.fold-toggle[aria-expanded=true] svg { transform: rotate(90deg); }
.fold-toggle:hover { background: #ffffff80; }
.track-head { padding: 8px 18px; }
.color-picker { height: 24px; }
.track-delete { width: 22px; height: 22px; }
.plan-projection { height: calc(var(--item-height) + 8px); background: #ededf0; border-color: #dfdfe480; }
.plan-projection .projection-title { display: inline-block; padding: 3px 10px; color: #858992; font-size: 11px; }
.leaf-day-label { color: var(--item-muted); font-size: 11px; }
.now-line { left: 0; }
.track-head, .track-row { transition: height 220ms var(--ease), background-color 160ms var(--ease); }
.plan-projection { transition: top 220ms var(--ease), height 220ms var(--ease); }
.scale-changing :is(.gantt-item,.plan-projection,.track-head,.track-row) { transition: none; }
.idea-track, .idea-head { background: #fafafb; }
.idea-head { border-top: 1px solid #e9e9ec; color: #666a73; }
.idea-head strong { font-size: 13px; font-weight: 550; }
.idea-head .track-operations { padding-left: 0; margin-top: 9px; }
.idea-track { border-top: 1px solid #e9e9ec; }
.idea-card { height: 28px; border-radius: 6px; background: #f1f1f3; border-color: #dcdde1; box-shadow: 0 1px 2px #00000006; }
.idea-title { display: block; max-width: max(0px, calc(100% - 24px)); font-size: 12px; line-height: 26px; padding-left: 10px; color: #5e626b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-card:hover { background: #eaeaec; }
.idea-open-icon { position: absolute; right: 8px; top: 7px; width: 12px; height: 12px; color: #828995; opacity: .7; pointer-events: none; }
.idea-title { max-width: calc(100% - 30px); }
.item-cell.is-done .cell-input { color: #78818d; }
.cell-region { position: absolute; top: 0; bottom: 0; display: flex; padding: 1px 8px; border-left: 1px solid #52607118; }
.cell-region:first-of-type { border-left: 0; }
.cell-region.is-occupied { background: #69758b05; }
.cell-region .cell-input { flex: 1; min-width: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cell-input.is-done { color: #78818d; }
.sync-dialog { width: min(620px,calc(100vw - 32px)); padding: 24px; border: 1px solid #e1e4ea; border-radius: 14px; box-shadow: 0 20px 70px #242c3b30; }
.sync-dialog::backdrop { background: #20273528; }
.sync-dialog h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.sync-comparison { max-height: 50vh; overflow: auto; }
.sync-comparison section { padding: 12px 0; border-top: 1px solid #eceef2; }
.sync-comparison h3 { font-size: 12px; font-weight: 500; margin: 0 0 10px; }
.sync-comparison section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sync-comparison small { color: #969da6; font-size: 10px; }
.sync-comparison pre { font: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sync-dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.journal-heading-actions { display: flex; align-items: center; gap: 18px; }
.journal-heading-actions .journal-progress { margin: 0; }
.journal-layout { display: flex; gap: 2px; background: #f4f5f6; border-radius: 7px; padding: 3px; }
.journal-layout button { padding: 5px 8px; font-size: 10px; border-radius: 5px; color: #82868e; }
.journal-layout button[aria-pressed=true] { background: #fff; color: #333943; box-shadow: 0 1px 3px #0000000b; }
.journal-grid { max-width: 1240px; padding: 32px 24px 40px; }
.journal-grid .journal-heading { align-items: center; padding-bottom: 24px; border: 0; }
.journal-board { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(290px,1fr); border: 1px solid #e3e6ea; border-radius: 12px; overflow: hidden; }
.journal-board .journal-section { margin: 0; padding: 20px 22px; border: 0; min-width: 0; }
.journal-board .journal-section h3 { font-size: 12px; letter-spacing: .3px; margin-bottom: 18px; color: #626974; }
.journal-board .task-section { border-right: 1px solid #e3e6ea; }
.journal-board .routine-section { background: #fafbfc; }
.journal-board .reflection-section { border-top: 1px solid #e3e6ea; border-right: 1px solid #e3e6ea; }
.journal-board .expenses-section { border-top: 1px solid #e3e6ea; }
.journal-board .journal-tasks-scroll { max-height: 270px; overflow: auto; scrollbar-width: thin; padding: 2px; margin: -2px; }
.journal-board .todo { min-height: 54px; margin: 6px 0; padding: 6px 10px; gap: 10px; }
.journal-board .todo-title { font-size: 13px; }
.journal-board .todo-note { padding: 6px; font-size: 12px; }
.journal-board .daily-add { flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.journal-board .daily-add input { min-width: 100px; font-size: 12px; }
.journal-board .daily-add button { font-size: 11px; padding: 8px; }
.journal-board .reflection-document, .journal-board .expenses-document { min-height: 180px; font-size: 14px; line-height: 1.9; }
.journal-metric { display: grid; grid-template-columns: 1fr minmax(70px,110px) 30px; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid #e7e9ed; }
.journal-metric:last-child { border-bottom: 0; }
.journal-metric > span { font-size: 12px; color: #5d6571; }
.journal-metric input { width: 100%; border: 1px solid #e2e5e9; border-radius: 6px; background: #fff; padding: 7px 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.journal-metric small { font-size: 10px; color: #969ba3; }
.metric-original { grid-column: 2 / -1; font-size: 12px; color: #896b3e; }
.routine-extra { white-space: pre-wrap; font: inherit; font-size: 12px; line-height: 1.7; color: #747b86; }
.overview-button { display: flex; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 7px; font-size: 11px; color: #747b86; }
.overview-button svg { width: 16px; height: 16px; }
.overview-button:hover, .overview-button[aria-expanded=true] { background: #f0f2f5; color: #303641; }
.todo-overview { position: fixed; z-index: 60; right: 14px; bottom: 14px; width: min(460px,calc(100vw - 28px)); display: flex; flex-direction: column; background: #fff; border: 1px solid #dfe3e9; border-radius: 12px; box-shadow: 0 12px 50px #25304722,0 2px 8px #2530470b; overflow: hidden; }
.overview-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 8px; }
.overview-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.overview-navigation { display: flex; align-items: center; gap: 10px; padding: 5px 18px 14px; border-bottom: 1px solid #eceef2; }
.overview-navigation input { border: 1px solid #e1e5eb; border-radius: 6px; font-size: 12px; padding: 6px 8px; color: #59616d; }
.overview-navigation button { padding: 6px 9px; font-size: 11px; }
.overview-days { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px 14px; scrollbar-width: thin; }
.overview-day { padding: 14px 0; border-bottom: 1px solid #eceef2; min-height: 82px; }
.overview-day > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.overview-day h3 { font-size: 13px; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.overview-day h3 small { font-size: 10px; font-weight: 400; margin-left: 8px; color: #9298a1; }
.overview-todo { padding: 3px 8px; margin: 5px 0; border: 1px solid color-mix(in srgb,var(--track) 23%,white); border-radius: 7px; background: color-mix(in srgb,var(--track) 13%,white); }
.overview-todo-line { display: grid; grid-template-columns: 15px 18px minmax(0,1fr) max-content 22px; align-items: center; gap: 5px; min-height: 28px; }
.overview-todo-line > input[type=checkbox] { margin: 0; accent-color: var(--track); width: 15px; height: 15px; cursor: pointer; }
.overview-title { width: 100%; min-width: 0; font-size: 12px; line-height: 22px; padding: 0 2px; background: transparent; border: 0; border-radius: 3px; text-overflow: ellipsis; }
.overview-property { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: #8b919b; padding: 0 4px; }
.overview-fold { display: grid; place-items: center; width: 18px; height: 24px; border-radius: 4px; color: #9198a2; }
.overview-fold:hover { background: #ffffff80; }
.overview-fold svg { width: 11px; height: 11px; transition: transform 160ms var(--ease); }
.overview-fold[aria-expanded=true] svg { transform: rotate(90deg); }
.overview-note-wrap { display: grid; grid-template-rows: 0fr; margin-left: 38px; margin-right: 22px; opacity: 0; transition: grid-template-rows 160ms var(--ease),opacity 140ms var(--ease); }
.overview-note-inner { min-height: 0; overflow: hidden; }
.overview-todo.is-expanded .overview-note-wrap { grid-template-rows: 1fr; opacity: 1; }
.overview-todo textarea { display: block; width: 100%; font-size: 12px; line-height: 20px; padding: 2px 0; margin: 4px 0 5px; background: transparent; border: 0; border-radius: 4px; resize: none; overflow: hidden; color: #69717e; }
.overview-todo .tool-icon { width: 22px; height: 24px; }
.overview-todo .tool-icon svg { width: 13px; height: 13px; }
.overview-todo.done { background: #f6f7f9; border-color: #e9ebef; }
.overview-todo.done .overview-title { text-decoration: line-through; color: #959aa3; }
.overview-todo.is-recurring:has(+.overview-todo:not(.is-recurring)) { margin-bottom: 15px; }
@media (max-width: 900px) { .journal-board { grid-template-columns: minmax(0,1fr); } .journal-board .task-section, .journal-board .reflection-section { border-right: 0; } .journal-board .routine-section { border-top: 1px solid #e3e6ea; } .journal-heading-actions { gap: 8px; } .overview-button span { display: none; } }
.idea-document { width: min(1000px, 88vw); height: min(720px, 82vh); padding: 0; border: 1px solid #dcdde2; border-radius: 14px; background: white; box-shadow: 0 18px 80px #21263124; resize: both; overflow: hidden; }
.idea-document::backdrop { background: #252a331c; backdrop-filter: blur(2px); }
.idea-document-heading { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid #eee; }
.idea-document-heading input { flex: 1; min-width: 0; border: 0; border-radius: 6px; font-size: 18px; font-weight: 550; padding: 4px 8px; background: transparent; }
.idea-document-heading button { font-size: 11px; }
.idea-document-body { height: calc(100% - 79px); }
.markdown-editor, .markdown-editor .cm-editor { height: 100%; }
.markdown-editor .cm-editor { font-size: 15px; color: #363940; background: white; }
.markdown-editor .cm-editor.cm-focused { outline: none; }
.markdown-editor .cm-scroller { overflow: auto; font-family: inherit; line-height: 1.9; }
.markdown-editor .cm-content { padding: 26px 0 80px; caret-color: #515761; }
.markdown-editor .cm-line { padding: 0 32px; }
.markdown-editor .md-heading { padding-top: 4px; padding-bottom: 4px; font-weight: 600; line-height: 1.5; }
.markdown-editor .md-h1 { font-size: 27px; }
.markdown-editor .md-h2 { font-size: 23px; }
.markdown-editor .md-h3 { font-size: 19px; }
.markdown-editor .md-h4 { font-size: 17px; }
.markdown-editor .md-strong { font-weight: 650; }
.markdown-editor .md-emphasis { font-style: italic; }
.markdown-editor .md-link { color: #657185; text-decoration: underline; text-underline-offset: 3px; }
.markdown-editor .md-strike { text-decoration: line-through; }
.markdown-editor .md-highlight { background: #f4e9ab; border-radius: 3px; }
.markdown-editor .md-code { font-family: Consolas, monospace; background: #f0f1f3; border-radius: 3px; }
.markdown-editor .md-code-line { font-family: Consolas, monospace; background: #f7f7f9; }
.markdown-editor .md-quote { color: #717680; }
.markdown-editor .md-bullet { color: #7a7e87; }
.markdown-editor .md-syntax { color: #a0a4ad; font-weight: 400; }
.idea-document-heading:focus { outline: none; }
@container (max-width:110px) {
  .time-label { position: absolute; top: 9px; left: 7px; right: 4px; font-size: 11px; overflow: hidden; white-space: nowrap; }
  .time-label small { display: none; }
  .column-hours { position: absolute; bottom: 10px; left: 7px; right: 4px; overflow: hidden; white-space: nowrap; }
  .column-hours-extra { display: none; }
  .column-hours[data-partial=true]::after { content: ' ·'; color: #a4a6ad; }
}
@media (max-width:1100px) { .workspace-toolbar { grid-template-columns: 1fr auto; gap: 8px; } .zoom-navigation { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; padding-left: 4px; } }
@media (max-width:760px) { .workspace-toolbar { grid-template-columns: minmax(0,1fr); } .period-navigation { flex-wrap: wrap; gap: 5px; } .toolbar-actions { grid-row: 2; } .zoom-navigation { grid-row: 3; } .time-heading { padding: 0 9px; } .save-status { margin-right: auto; } }

body[data-view=statistics] main { overflow: auto; }
body[data-view=statistics] #surface { height: auto; }
.statistics { max-width: 1120px; margin: 0 auto; padding: 28px 0 44px; }
.statistics-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.statistics-heading h2 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
.statistics-heading p { margin: 8px 0 0; color: #9398a1; font-size: 12px; }
.stats-range { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 9px; background: #f3f4f6; }
.stats-range button { min-width: 42px; height: 30px; border-radius: 7px; font-size: 12px; color: #868b95; }
.stats-range button[aria-pressed=true] { color: #373c46; background: white; box-shadow: 0 1px 3px #2027360c; }
.stats-layout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.stats-card { --stat-color: #6f92c3; padding: 22px 24px 16px; border: 1px solid #e9ecf1; border-radius: 14px; background: #fff; }
.stats-card[data-stat-card=sleepWindow] { --stat-color: #968cb9; }
.stats-sleep-range { fill: var(--stat-color); fill-opacity: .4; }
.stats-sleep-start { fill: white; stroke: var(--stat-color); stroke-width: 1.5; }
.stats-sleep-end { fill: var(--stat-color); }
.stats-mark:hover .stats-sleep-range, .stats-mark:focus-visible .stats-sleep-range { fill-opacity: .7; }
.stats-card[data-stat-card=expense] { --stat-color: #b3956c; }
.stats-card header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 25px; }
.stats-card h3 { margin: 0; font-size: 14px; font-weight: 600; color: #5a626f; }
.stats-coverage { margin-left: auto; color: #78818e; font-size: 11px; white-space: nowrap; }
.stats-amount { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; color: #343943; font-size: 34px; font-weight: 550; letter-spacing: -1px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stats-amount small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: #9398a1; }
.stats-caption { min-height: 17px; margin: 7px 0 17px; font-size: 11px; color: #727c8a; }
.stats-chart { height: 190px; position: relative; color: var(--stat-color); }
.stats-chart svg { display: block; width: 100%; height: 190px; stroke: none; }
.stats-gridline { stroke: #eceff3; stroke-width: 1; stroke-dasharray: 3 4; }
.stats-axis { fill: #747f8f; stroke: none; font-size: 11px; font-variant-numeric: tabular-nums; }
.stats-line { stroke: var(--stat-color); stroke-width: 2; fill: none; }
.stats-point { fill: white; stroke: var(--stat-color); stroke-width: 2; }
.stats-bar { fill: var(--stat-color); fill-opacity: .72; }
.stats-hit { fill: transparent; stroke: none; }
.stats-mark { cursor: pointer; outline: none; }
.stats-mark:hover .stats-point, .stats-mark:focus-visible .stats-point { fill: var(--stat-color); r: 4; }
.stats-mark:hover .stats-bar, .stats-mark:focus-visible .stats-bar { fill-opacity: 1; }
.stats-mark:focus-visible .stats-hit { fill: #838fa012; }
.stats-tooltip { position: absolute; top: -7px; max-width: 100%; padding: 6px 9px; border: 1px solid #e7eaf0; border-radius: 7px; background: #ffffffee; color: #596270; box-shadow: 0 2px 8px #2430410a; pointer-events: none; font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-empty-plot { display: grid; place-items: center; height: 190px; border-radius: 8px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 62px, #f3f4f7 62px, #f3f4f7 63px); color: #b1b5bc; font-size: 12px; }
.stats-source-note { display: flex; justify-content: space-between; gap: 12px; margin: 15px 3px 24px; font-size: 11px; color: #a0a5ad; }
.stats-unread { padding: 0; color: #9b825e; font-size: inherit; }
.stats-unread:hover { text-decoration: underline; text-underline-offset: 3px; }
.stats-records { border-top: 1px solid #eceef2; }
.stats-records summary { display: flex; align-items: center; gap: 8px; padding: 18px 3px; list-style: none; cursor: pointer; font-size: 12px; color: #5d6572; }
.stats-records summary::-webkit-details-marker { display: none; }
.stats-records summary::before { content: '›'; display: inline-block; color: #8e959f; font-size: 17px; transition: transform 150ms var(--ease); }
.stats-records[open] summary::before { transform: rotate(90deg); }
.stats-records summary span { margin-left: auto; color: #a0a5ad; font-size: 11px; }
.stats-table-wrap { overflow-x: auto; }
.stats-records table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.stats-records th, .stats-records td { padding: 13px 12px; text-align: right; border-bottom: 1px solid #f0f2f5; }
.stats-records th { color: #9198a3; font-size: 11px; font-weight: 400; }
.stats-records th:first-child, .stats-records td:first-child { text-align: left; }
.stats-records td { color: #676f7c; }
.stats-records td button { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: 5px; font-size: inherit; }
.stats-records td button:hover { background: #f3f5f8; }
.stats-records td small { display: block; margin-top: 3px; color: #a48a62; font-size: 10px; }
.stats-records .has-unread td { background: #fcfaf5; }
.stats-records .is-selected td { background: #f1f4f9; }
.stats-no-records { display: flex; align-items: center; justify-content: space-between; padding: 20px 3px; color: #a0a5ad; font-size: 12px; }
@media (min-width:761px) and (max-width:1100px) { .stats-layout { grid-template-columns: repeat(2,minmax(0,1fr)); } .stats-card[data-stat-card=expense] { grid-column: 1 / -1; } }
@media (max-width:760px) { .statistics { padding-top: 22px; } .stats-layout { grid-template-columns: minmax(0,1fr); gap: 16px; } .stats-card { padding: 19px 18px 14px; } .stats-amount { font-size: 30px; } .stats-records table { min-width: 520px; } .stats-source-note { flex-wrap: wrap; } }

@media (max-width:600px) {
  :root { --head: 72px; }
  main { padding: 0 8px; padding-bottom: env(safe-area-inset-bottom); }
  .workspace-toolbar { grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: 6px; padding: 8px 10px; }
  .period-navigation { display: contents; }
  .arrow-group { grid-column: 1; grid-row: 1; }
  .arrow-group .icon-button { width: 28px; height: 28px; }
  #period-title { grid-column: 2 / 5; grid-row: 1; margin: 0; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #go-today { grid-column: 5; grid-row: 1; padding: 8px 5px; }
  #open-journal { grid-column: 1; grid-row: 2; }
  #open-statistics { grid-column: 2; grid-row: 2; width: fit-content; }
  #return-timeline { grid-column: 1 / 3; grid-row: 2; width: fit-content; }
  .page-button { padding: 8px; font-size: 11px; gap: 4px; }
  .toolbar-actions { grid-column: 3 / 6; grid-row: 2; gap: 3px; margin: 0; }
  .toolbar-actions .tool-icon { width: 28px; height: 32px; }
  .toolbar-actions .primary-button { font-size: 0; width: 32px; height: 32px; padding: 8px; gap: 0; justify-content: center; }
  .toolbar-actions .primary-button svg { width: 16px; height: 16px; }
  .overview-button { padding: 8px; }
  .save-status { font-size: 0; width: 18px; min-height: 32px; padding: 4px; margin: 0; }
  .save-status::before { width: 6px; height: 6px; margin: 0; }
  .zoom-navigation { grid-column: 1 / 6; grid-row: 3; padding: 0; gap: 10px; font-size: 9px; }
  .zoom-navigation input { flex: 1; min-width: 60px; width: auto; height: 28px; }
  .track-head-viewport { overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
  .track-head { display: grid; grid-template-columns: 18px minmax(0,1fr) 24px; grid-template-rows: 24px 24px; align-content: start; padding: 8px 6px; }
  .track-title-row, .track-head .track-operations { display: contents; }
  .track-name { grid-column: 1 / -1; grid-row: 1; height: 24px; padding: 1px 0; }
  .track-head .color-picker { grid-column: 1; grid-row: 2; width: 18px; height: 24px; }
  .track-head .track-operations small { grid-column: 2; grid-row: 2; align-self: center; font-size: 0; }
  .track-head .track-operations small::after { content: attr(data-count); font-size: 10px; font-variant-numeric: tabular-nums; }
  .track-head .track-delete { grid-column: 3; grid-row: 2; width: 24px; height: 24px; opacity: .65; }
  .idea-head strong { grid-column: 1 / -1; grid-row: 1; align-self: center; }
  .idea-head .track-operations small { grid-column: 1 / -1; }
  .fold-toggle { left: 2px; top: 0; width: 22px; height: 26px; }
  .item-topbar .item-delete { right: 2px; top: 0; width: 22px; height: 26px; }
  .item-heading { left: 27px; right: 27px; }
  .item-title, .cell-input, .track-name { font-size: 16px; }
  .cell-region { padding-left: 6px; padding-right: 6px; }
  .journal-grid { padding: 18px 2px 28px; }
  .journal:not(.journal-grid) { padding: 18px 10px; }
  .head-label { padding-left: 6px; padding-right: 6px; font-size: 11px; }
  .recurring-composer { flex-wrap: wrap; }
  .journal-heading { gap: 10px; }
  .journal-heading-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
  .journal-heading h2 { font-size: 23px; }
  .journal-heading h2 small { margin-top: 6px; font-size: 11px; }
  .journal-board .journal-section { padding: 17px 14px; }
  .journal-board .todo { display: grid; grid-template-columns: 22px minmax(0,1fr) 30px; gap: 5px 7px; padding: 8px; }
  .todo-check { margin: 0; min-height: 30px; }
  .todo-name { grid-column: 2; }
  .journal-board .todo-title { font-size: 16px; }
  .journal-board .todo-note { grid-column: 2; grid-row: 2; padding: 1px 2px; font-size: 16px; min-height: 28px; }
  .todo .item-delete, .todo .stop-daily { grid-column: 3; grid-row: 1; }
  .todo-column-labels { display: none; }
  .journal-metric input, .journal-section textarea, .recurring-composer input, .recurring-composer select { font-size: 16px; }
  .journal-board .reflection-document, .journal-board .expenses-document { font-size: 16px; }
  .todo-overview { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  .overview-navigation input { font-size: 16px; }
  .overview-days { padding-left: 12px; padding-right: 12px; }
  .overview-todo-line { grid-template-columns: 20px 24px minmax(0,1fr) max-content 28px; min-height: 34px; gap: 4px; }
  .overview-todo-line > input[type=checkbox] { width: 20px; height: 20px; }
  .overview-fold { width: 24px; height: 32px; }
  .overview-property { max-width: 65px; padding: 0 2px; }
  .overview-title { font-size: 16px; line-height: 26px; }
  .overview-todo .tool-icon { width: 28px; height: 32px; }
  .overview-todo textarea { font-size: 16px; line-height: 24px; }
  .overview-note-wrap { margin-left: 48px; margin-right: 28px; }
  .idea-document { width: calc(100vw - 20px); height: min(720px,calc(100dvh - 32px)); max-width: none; resize: none; }
  .idea-document-heading { padding: 12px; gap: 5px; }
  .idea-document-heading input { font-size: 16px; padding: 6px; }
  .idea-document-body { height: calc(100% - 65px); }
  .idea-document .cm-content { font-size: 16px; }
  .sync-dialog { padding: 18px; }
  .sync-dialog footer button { font-size: 11px; }
}