:root {
  color-scheme: light;
  --bg: #fdfdfc;
  --chrome: #f5f5f2;
  --hover: #ecece8;
  --text: #242522;
  --muted: #6e706a;
  --faint: #969992;
  --line: #e4e5e0;
  --blue: #315f91;
  --blue-bg: #e7eff8;
  --green: #39704d;
  --green-bg: #e5f2e8;
  --amber: #8b6517;
  --amber-bg: #fbf0ce;
  --rose: #9b4545;
  --rose-bg: #f8e5e4;
  --violet: #725a97;
  --violet-bg: #eee8f6;
  --shadow: 0 18px 60px rgba(25, 25, 22, .14);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; padding-top: 28px; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.server-identity { position: fixed; inset: 0 0 auto; z-index: 40; min-height: 28px; padding: 5px 14px; border-bottom: 1px solid #d9e5d8; background: #edf5ed; color: #315d3c; font-size: .72rem; font-weight: 600; line-height: 18px; text-align: center; }
.server-identity.unverified { border-color: #e9d5b0; background: #fff5df; color: #805c20; }
.server-identity.synthetic { border-color: #d9e5d8; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #547fab; outline-offset: 2px; }

.skip-link { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 10px; border-radius: 6px; background: #fff; }
.skip-link:focus { top: 12px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 28px auto 0 0; z-index: 20; width: 224px; display: flex; flex-direction: column; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--chrome); }
.workspace { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 8px 13px; font-size: .82rem; }
.workspace strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace small, .sidebar-footer small { display: block; margin-top: 2px; color: var(--muted); font-size: .69rem; font-weight: 400; }
.brand-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #d7d9d2; border-radius: 8px; background: #ebece7; color: #42453f; font-size: .8rem; font-weight: 750; letter-spacing: -.03em; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #e1e2dd; border-radius: 7px; background: rgba(255, 255, 255, .58); color: var(--muted); text-align: left; font-size: .77rem; }
.search-trigger:hover { background: var(--hover); }
kbd { margin-left: auto; color: var(--faint); font: inherit; font-size: .67rem; }
.nav-list { display: grid; gap: 2px; margin-top: 10px; }
.nav-list a { position: relative; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px; border-radius: 7px; color: #555751; font-size: .8rem; }
.nav-list a > span { width: 18px; color: #777771; text-align: center; }
.nav-list a b { margin-left: auto; padding: 1px 6px; border-radius: 9px; background: #e3e3df; font-size: .68rem; }
.nav-list a:hover, .nav-list a.active { background: #e8e9e4; color: #1f211e; }
.nav-list a.active { font-weight: 650; }
.nav-list a.active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -6px; width: 2px; border-radius: 2px; background: var(--blue); }
.nav-label { margin: 24px 9px 7px; color: #969690; font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.secondary { margin-top: 0; }
.sidebar-footer { display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding: 15px 9px 3px; border-top: 1px solid var(--line); font-size: .72rem; }
.sidebar-footer i, .save-state i { flex: none; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #5d956f; }
.workspace-frame { min-width: 0; min-height: 100vh; margin-left: 224px; }
.topbar { position: sticky; top: 28px; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 20px; border-bottom: 1px solid rgba(228, 229, 224, .82); background: rgba(253, 253, 252, .9); backdrop-filter: blur(18px); }
.breadcrumbs { display: flex; align-items: center; gap: 7px; font-size: .75rem; }
.breadcrumbs span, .breadcrumbs b { color: var(--muted); font-weight: 400; }
.save-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .69rem; }
.save-state button { padding: 7px; font-weight: 700; }
.save-state.error i { background: var(--rose); }
.save-state.saving i { background: var(--amber); }
.demo-banner, .global-error { max-width: 980px; margin: 10px auto 0; padding: 8px 12px; border-radius: 7px; font-size: .7rem; }
.demo-banner { display: flex; gap: 8px; border: 1px solid #e7ddbc; background: #fff9e8; color: #745b1d; }
.global-error { border: 1px solid #ecc8c5; background: #fff1f0; color: #8d3f3a; }
#content { min-width: 0; min-height: calc(100vh - 46px); }
.page { width: 100%; min-width: 0; max-width: 980px; margin: 0 auto; padding: 40px 48px 100px; }
.page.wide { max-width: 1120px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page h1 { margin: 0; font-size: 1.75rem; font-weight: 720; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.page-description { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.primary, .secondary-button, .quiet-button, .danger { min-height: 34px; padding: 7px 11px; border-radius: 7px; font-size: .74rem; transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out; }
.primary { background: #2f2f2c; color: #fff; }
.primary:hover { background: #111; }
.secondary-button, .quiet-button { border: 1px solid var(--line); background: #fff; }
.secondary-button:hover, .quiet-button:hover { background: var(--chrome); }
.danger { color: var(--rose); }
.icon-button { width: 34px; height: 34px; border-radius: 6px; }
.icon-button:hover { background: var(--hover); }
.toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 16px; border-bottom: 1px solid var(--line); }
.scope-tabs { display: flex; gap: 18px; }
.scope-tabs button { position: relative; padding: 9px 1px 11px; color: var(--muted); font-size: .77rem; }
.scope-tabs button.active { color: var(--text); font-weight: 620; }
.scope-tabs button.active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: #333; }
.toolbar-actions { display: flex; min-width: 0; align-items: center; gap: 6px; }
.toolbar select, .toolbar input { min-height: 32px; border: 1px solid #dedfd9; border-radius: 7px; background: #f9f9f7; padding: 5px 8px; font-size: .72rem; }

/* Week document */
.week-browser { position: relative; display: grid; grid-template-columns: 34px minmax(260px, 370px) 34px; align-items: center; justify-content: center; gap: 8px; margin: 26px auto 0; }
.week-browser > button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 1.2rem; }
.week-picker { position: relative; }
.week-picker > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; box-shadow: 0 3px 14px rgba(25, 25, 22, .04); }
.week-picker strong, .week-picker small { display: block; }
.week-picker strong { font-size: .85rem; }
.week-picker small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.week-menu { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 25; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.week-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px; border-radius: 7px; text-align: left; }
.week-menu button:hover, .week-menu button[aria-selected="true"] { background: var(--chrome); }
.week-menu em { color: var(--green); font-size: .61rem; font-style: normal; }
.new-list { display: grid; grid-template-columns: 22px minmax(0, 1fr) 136px 30px; align-items: center; gap: 7px; min-height: 42px; color: var(--faint); }
.task-create, .subtask-create { display: grid; grid-template-columns: 18px 18px 20px minmax(0, 1fr) 56px; align-items: center; gap: 5px; min-height: 42px; color: var(--faint); }
.subtask-create { display: none; min-height: 30px; }
.task-row.editing + .subtask-create { display: grid; }
.new-list { width: 100%; min-width: 0; margin: 8px 0 20px; padding: 0 7px; border-radius: 5px; }
.new-list:hover { background: var(--chrome); }
.new-list input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .875rem; line-height: 1.35; }
.new-list input[name="title"] { grid-column: 2; }
.new-list input[name="date"] { grid-column: 3; color: var(--muted); font-size: .75rem; }
.new-list .date-control { grid-column: 3; min-width: 0; color: var(--muted); }
.new-list .date-trigger { width: 100%; font-size: .75rem; text-align: left; }
.global-new-list { max-width: 620px; margin: 20px 0 8px; border-bottom: 1px solid var(--line); }
.global-new-list + .collection { margin-top: 8px; }
.task-create input, .subtask-create input { grid-column: 4; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .875rem; line-height: 1.35; }
.placeholder-plus { grid-column: 3; display: grid; place-items: center; width: 17px; height: 17px; color: var(--faint); font-size: 1rem; line-height: 1; }
.new-list kbd, .task-create kbd, .subtask-create kbd { display: none; }
.new-list:focus-within kbd, .task-create:focus-within kbd, .subtask-create:focus-within kbd { display: block; }
.week-lists, .section, .task-list, .task-group { min-width: 0; }
.section { margin-top: 23px; }
.section-head { display: flex; align-items: center; gap: 8px; min-height: 39px; border-bottom: 1px solid var(--line); }
.list-drag-handle { flex: none; width: 24px; height: 30px; border-radius: 6px; color: var(--faint); cursor: grab; touch-action: none; user-select: none; }
.list-drag-handle:hover, .list-drag-handle:focus-visible { background: var(--hover); color: var(--text); }
.list-drag-handle:active { cursor: grabbing; background: var(--blue-bg); color: var(--blue); }
.section-toggle { width: 20px; height: 20px; border-radius: 4px; color: var(--faint); }
.section-toggle:hover { background: var(--hover); }
.section-title { min-width: 80px; margin: 0; padding: 3px 0; outline: 0; font-size: .94rem; font-weight: 660; }
.section-date { color: var(--muted); font-size: .69rem; }
.section-head .date-control { flex: 0 1 auto; min-height: 24px; padding: 1px 3px 1px 8px; border: 1px solid #e5e5e0; border-radius: 999px; background: #f7f7f5; color: var(--muted); }
.section-head .date-trigger { width: auto; font-size: .67rem; line-height: 1.2; text-align: left; }
.section-head .date-native-clear { position: relative; display: grid; flex: none; width: 20px; height: 20px; margin-left: 2px; place-items: center; padding: 0; border-radius: 50%; color: var(--faint); font-size: 13px; line-height: 1; }
.section-head .date-native-clear:hover, .section-head .date-native-clear:focus-visible { background: #e7e7e2; color: var(--text); }
.section-head .date-control.empty .date-native-clear { display: none; }
.section-date-input { width: auto; max-width: 170px; font-size: .75rem; }
.section-count { margin-left: auto; color: var(--faint); font-size: .68rem; }
.task-create { margin: 0; }
.section.collapsed .task-create, .section.collapsed .task-list { display: none; }
.task-list { display: grid; }
.task-list > .task-group { margin-bottom: 2px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.task-list > .task-group.has-children { margin-bottom: 8px; }
.task-row { position: relative; display: grid; grid-template-columns: 18px 18px 20px minmax(0, 1fr) 56px; align-items: start; gap: 3px 5px; width: 100%; min-width: 0; min-height: 42px; padding: 5px 0; border-radius: 6px; }
.task-row:hover, .task-row.editing { background: var(--chrome); }
.drag-handle { position: relative; display: grid; place-items: center; width: 18px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 5px; color: #7d858d; cursor: grab; touch-action: none; user-select: none; }
.drag-handle::before { content: ""; position: absolute; inset: -6px -3px; border-radius: 8px; }
.drag-handle:hover, .drag-handle:focus-visible { border-color: #d4d4cf; background: #fff; color: #4f5962; box-shadow: 0 2px 7px rgba(30, 30, 26, .08); }
.drag-handle:active { cursor: grabbing; background: var(--blue-bg); color: var(--blue); }
.task-expand-spacer { display: block; width: 18px; height: 24px; }
.subtask-toggle { display: grid; place-items: center; align-self: start; width: 18px; height: 24px; margin: 0; padding: 0; border-radius: 5px; color: var(--muted); font-size: 0; }
.subtask-toggle::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.subtask-toggle[aria-expanded="false"]::before { transform: translateX(-2px) rotate(-45deg); }
.subtask-toggle:hover, .subtask-toggle:focus-visible { background: var(--hover); color: var(--text); }
.task-check { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; padding: 0; border: 1.5px solid #8f969e; border-radius: 4px; background: #fff; color: #fff; font-size: .66rem; }
.task-row.done .task-check { border-color: var(--green); background: var(--green); }
.task-row.cancelled .task-check { border-color: var(--rose); background: var(--rose); }
.task-copy { grid-column: 4; min-width: 0; }
.task-row.subtask { padding-top: 2px; padding-bottom: 2px; }
.task-row.subtask .task-meta { margin-top: 2px; }
.task-heading { position: relative; display: block; min-width: 0; min-height: 24px; }
.task-heading::before { content: attr(data-status-label); float: right; padding: 4px 7px 4px 35px; visibility: hidden; white-space: nowrap; font-size: .72rem; line-height: 16px; }
.task-heading::after { content: ""; display: block; clear: both; }
.task-heading-controls { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 4px; height: 24px; }
.task-title { min-height: 24px; outline: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .95rem; line-height: 24px; }
.task-heading .task-title { min-width: 0; }
.task-row.done .task-title, .task-row.cancelled .task-title { color: var(--muted); text-decoration: line-through; }
.task-row.priority-critical .task-title, .task-row.priority-blocker .task-title { font-weight: 700; }
.task-row.priority-blocker .task-title { color: #c55a11; }
.priority-toggle { width: 20px; height: 24px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font-size: .75rem; font-weight: 800; line-height: 1; }
.priority-toggle-normal { opacity: .28; }
.task-row:hover .priority-toggle-normal, .priority-toggle-normal:focus-visible { opacity: .52; }
.priority-toggle-normal:hover { border-color: var(--line); background: #fff; opacity: 1; }
.priority-toggle-critical:hover, .priority-toggle-critical:focus-visible { background: var(--hover); color: var(--text); }
.priority-toggle-blocker { color: #c55a11; }
.priority-toggle-blocker:hover, .priority-toggle-blocker:focus-visible { background: #fff0e6; }
.priority-toggle:focus-visible { outline: 2px solid #6d91ba; outline-offset: 1px; }
.task-meta { grid-column: 4 / -1; display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin: 0; padding-right: 2px; }
.task-child-count { flex-basis: 100%; color: var(--muted); font-size: .72rem; }
.task-facts { display: flex; flex-wrap: wrap; align-items: center; flex-basis: 100%; min-width: 0; gap: 4px 10px; }
.scope-tag, .task-tag { display: inline-flex; align-items: center; max-width: 140px; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: transparent; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: .72rem; line-height: 1.4; cursor: pointer; }
.add-tag-trigger { display: none; padding: 1px 4px; border-radius: 4px; color: var(--muted); font-size: .62rem; }
.task-row.editing .add-tag-trigger { display: inline-flex; }
.add-tag-trigger:hover { background: var(--hover); }
.toolbar-context { color: var(--muted); font-size: .68rem; }
.inline-control { position: relative; display: inline-flex; align-items: center; max-width: 100%; border-radius: 4px; color: var(--muted); cursor: pointer; }
.inline-control span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.inline-control select, .inline-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.project-inline { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--muted); font-size: .72rem; text-align: left; }
.project-inline span, .date-trigger-label { font-size: inherit; }
.task-meta-icon { display: block; flex: none; width: 15px; height: 15px; overflow: visible; }
.deadline .task-meta-icon { width: 16px; height: 16px; }
.project-inline:hover, .scope-tag:hover, .task-tag:hover { text-decoration: underline; }
.description-preview { flex-basis: 100%; min-width: 0; min-height: 17px; padding: 1px 0; outline: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: .72rem; line-height: 1.45; cursor: text; }
.description-preview.editing { overflow: visible; white-space: pre-wrap; border-bottom: 1px solid #aeb7c1; color: var(--text); }
.task-meta .empty { display: none; }
.task-row.editing .task-meta .inline-control.empty { display: inline-flex; opacity: .62; }
.task-row.editing .task-meta .description-preview.empty { display: block; opacity: .62; }
.date-control { position: relative; display: inline-flex; min-width: 0; max-width: 100%; align-items: center; }
.date-control, .deadline, .planned { padding: 1px 5px; border-radius: 4px; }
.task-meta .date-control { min-height: 18px; padding-block: 0; }
.task-meta .planned { background: var(--chrome); color: var(--muted); }
.task-meta .deadline:not(.soon):not(.overdue) { color: var(--text); }
.deadline.soon { background: var(--amber-bg); color: var(--amber); }
.deadline.overdue { background: var(--rose-bg); color: var(--rose); }
.date-trigger, .deadline-trigger { max-width: 100%; padding: 0; border: 0; overflow: hidden; background: transparent; color: inherit; font: inherit; font-size: .72rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.task-meta .date-trigger { display: inline-flex; align-items: center; gap: 5px; }
.date-trigger:focus-visible, .deadline-trigger:focus-visible { outline: 2px solid #7fa8d0; outline-offset: 2px; border-radius: 3px; }
.date-native-input, .deadline-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.date-native-clear { display: none; }
.task-actions { grid-column: 5; display: grid; justify-items: end; min-width: 0; align-self: start; }
.status-control { position: relative; max-width: 112px; }
.status-pill { max-width: 100%; padding: 4px 7px; border-radius: 999px; overflow: hidden; white-space: nowrap; font-size: .72rem; line-height: 16px; text-overflow: ellipsis; }
.status-menu { position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; display: none; width: 144px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.status-control:hover .status-menu, .status-control:focus-within .status-menu { display: grid; }
.status-menu button { width: 100%; min-height: 34px; padding: 8px 9px; border-radius: 5px; font-size: .72rem; font-weight: 400; line-height: 1.25; text-align: left; }
.status-menu button:hover { box-shadow: inset 0 0 0 1px rgba(41, 41, 39, .1); filter: brightness(.98); }
.status-menu button[aria-checked="true"], .status-menu button.current { font-weight: 700; }
.status-todo { background: #eeeeeb; color: #676762; }
.status-in_progress { background: var(--blue-bg); color: var(--blue); }
.status-waiting { background: var(--amber-bg); color: var(--amber); }
.status-done { background: var(--green-bg); color: var(--green); }
.status-cancelled { background: var(--rose-bg); color: var(--rose); }
.task-row-actions { display: flex; justify-content: flex-end; gap: 1px; height: 24px; }
.task-delete { width: 28px; height: 24px; border-radius: 5px; color: var(--rose); font-size: 1rem; opacity: 0; }
.task-delete:hover, .task-delete:focus-visible { background: var(--rose-bg); }
.task-more { width: 28px; height: 24px; border-radius: 5px; color: var(--faint); opacity: 0; }
.task-row:hover .task-delete, .task-row:focus-within .task-delete, .task-row:hover .task-more, .task-row:focus-within .task-more { opacity: 1; }
.subtask-list { margin-left: 22px; padding-left: 7px; border-left: 1px solid var(--line); }
.child-group { min-width: 0; }
.subtask-list .task-row { grid-template-columns: 18px 18px 20px minmax(0, 1fr) 56px; }
.subtask-create { margin-left: 22px; padding-left: 7px; border-left: 1px solid var(--line); }
.task-row.editing:has(+ .subtask-create) { border-radius: 6px 6px 0 0; }
.task-row.editing + .subtask-create { position: relative; margin-left: 0; padding-left: 29px; border-left: 0; border-radius: 0 0 6px 6px; background: var(--chrome); }
.task-row.editing + .subtask-create::before { content: ""; position: absolute; top: 0; bottom: 0; left: 22px; border-left: 1px solid var(--line); }
.drop-before::before, .drop-after::after { content: ""; position: absolute; z-index: 8; left: 0; right: 0; height: 3px; border-radius: 3px; background: #4a7fba; box-shadow: 0 0 0 1px #fff; }
.drop-before::before { top: -2px; }
.drop-after::after { bottom: -2px; }
.task-group.drop-after-group { position: relative; }
.task-group.drop-after-group::after { content: ""; position: absolute; z-index: 8; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 3px; background: #4a7fba; box-shadow: 0 0 0 1px #fff; }
.drop-child { background: #f7faff; box-shadow: inset 0 0 0 2px #4a7fba; border-radius: 6px; }
.drop-child::after { content: "Как подзадача"; position: absolute; z-index: 8; right: 8px; bottom: 4px; color: var(--blue); font-size: .58rem; font-weight: 650; }
.sortable-chosen > .task-row { background: var(--blue-bg); }
.sortable-ghost { opacity: .28; }
.sortable-drag > .task-row, .sortable-fallback > .task-row { background: #fff; box-shadow: 0 12px 32px rgba(30, 30, 26, .16); }
.sortable-fallback { pointer-events: none; }
.sorting-tasks .subtask-create, .sorting-tasks .task-create { pointer-events: none; }
.section.drop-section { border-radius: 8px; outline: 2px solid #8eb2d8; outline-offset: 2px; background: #f7faff; }

.task-picker-popover { position: fixed; z-index: 95; width: 272px; max-height: min(360px, calc(100vh - 20px)); overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(30, 30, 26, .18); }
.task-picker-popover > strong { display: block; padding: 2px 5px 8px; font-size: .76rem; }
.task-picker-popover > small { display: block; padding: 7px 5px 2px; color: var(--muted); font-size: .58rem; }
.task-picker-popover input { width: 100%; margin-bottom: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; outline: 0; font: inherit; font-size: .69rem; }
.task-picker-popover input:focus { border-color: #8eb2d8; }
.picker-options { display: grid; max-height: 238px; overflow: auto; }
.picker-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 6px; border-radius: 6px; font-size: .7rem; text-align: left; }
.picker-option-row { display: flex; align-items: center; }
.picker-option-row .picker-option { min-width: 0; }
.picker-delete { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 5px; color: var(--muted); font-size: .9rem; }
.picker-delete:hover:not(:disabled) { background: var(--rose-bg); color: var(--rose); }
.picker-delete:disabled { opacity: .28; cursor: not-allowed; }
.picker-option:hover { background: var(--hover); }
.picker-option:disabled { opacity: .5; cursor: not-allowed; }
.picker-check { margin-left: auto; color: var(--blue); }
.picker-create { color: var(--blue); }
.picker-empty { padding: 9px 6px; color: var(--muted); font-size: .68rem; }

/* Apple Reminders-inspired date picker: suggestions first, calendar second. */
.date-picker-popover { position: fixed; z-index: 90; top: var(--picker-top); left: var(--picker-left); width: 320px !important; padding: 11px; border: 1px solid rgba(30, 30, 26, .12); border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 50px rgba(30, 30, 26, .22); backdrop-filter: blur(16px); color: var(--text); }
.date-picker-head, .date-calendar-head { display: flex; align-items: center; justify-content: space-between; }
.date-picker-head { margin: 0 2px 8px; font-size: .76rem; }
.date-picker-head button, .date-calendar-head button { width: 28px; height: 28px; border-radius: 7px; color: var(--muted); font-size: 1.05rem; }
.date-picker-head button:hover, .date-calendar-head button:hover { background: var(--hover); }
.date-suggestions { display: grid; gap: 2px; }
.date-suggestions > p { margin: 2px 8px 4px; color: var(--muted); font-size: .67rem; font-weight: 700; }
.date-suggestion { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border-radius: 9px; text-align: left; }
.date-suggestion:hover { background: var(--hover); }
.date-suggestion-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #72736f; font-size: .95rem; }
.date-suggestion b, .date-suggestion small { display: block; }
.date-suggestion b { font-size: .73rem; font-weight: 600; }
.date-suggestion small { margin-top: 1px; color: var(--muted); font-size: .65rem; }
.date-clear { margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; padding-top: 10px; }
.date-calendar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.date-calendar-head { padding: 0 3px 7px; }
.date-calendar-head strong { font-size: .75rem; text-transform: capitalize; }
.date-weekdays, .date-grid { display: grid; grid-template-columns: repeat(7, 30px); justify-content: center; gap: 2px; }
.date-weekdays { margin-bottom: 2px; color: var(--faint); font-size: .61rem; text-align: center; }
.date-cell { width: 30px; height: 30px; border-radius: 50%; color: var(--text); font-size: .7rem; }
.date-cell:hover { background: var(--hover); }
.date-cell.outside { color: #c6c7c4; }
.date-cell.today { color: var(--blue); font-weight: 700; }
.date-cell.selected { background: var(--blue); color: #fff; font-weight: 700; }

/* Other surfaces */
.day-navigator { display: grid; grid-template-columns: 36px minmax(180px, 280px) 36px; align-items: center; justify-content: center; gap: 8px; margin: 24px auto 2px; }
.day-navigator > button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 1.15rem; }
.day-navigator > button:hover { background: var(--chrome); color: var(--text); }
.day-navigator label, .day-navigator .date-control { position: relative; display: grid; place-items: center; min-height: 42px; padding: 7px 34px 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .81rem; font-weight: 650; text-align: center; cursor: pointer; }
.day-navigator label::after, .day-navigator .date-control::after { content: "▾"; position: absolute; right: 12px; color: var(--muted); font-size: .68rem; pointer-events: none; }
.day-navigator .date-trigger { width: 100%; font-size: inherit; font-weight: inherit; text-align: center; }
.day-calendar-input:not(.date-control) { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tasks-controls { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.tasks-controls label { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; }
.tasks-controls select { min-width: 0; max-width: 100%; }
.tasks-controls button { min-height: 32px; padding: 5px 8px; border-radius: 6px; color: var(--muted); font-size: .7rem; }
.tasks-controls button:hover { background: var(--hover); color: var(--text); }
.task-surface { width: 100%; min-width: 0; margin-top: 8px; }
.task-surface > .task-list { padding-top: 3px; }
.tasks-create { min-height: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tasks-create:focus-within { background: var(--chrome); }
.lists-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; max-width: 620px; margin-top: 26px; }
.lists-search input { min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #fff; font-size: .8rem; }
.lists-search input:focus { border-color: #8eb2d8; box-shadow: 0 0 0 2px rgba(109, 145, 186, .12); }
.lists-search button { min-height: 38px; padding: 8px 13px; border-radius: 8px; background: #2f2f2c; color: #fff; font-size: .75rem; }
.list-directory-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 13px 5px; border-bottom: 1px solid var(--line); border-radius: 4px; text-align: left; }
.list-directory-row:hover { background: #fcfcfb; }
.list-directory-row span, .list-directory-row strong, .list-directory-row small { display: block; min-width: 0; }
.list-directory-row strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.list-directory-row small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.list-directory-row b { color: var(--muted); font-size: .67rem; font-weight: 500; white-space: nowrap; }
.collection { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.collection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 5px; border-bottom: 1px solid var(--line); }
.collection-row:hover { background: #fcfcfb; }
.collection-row h2 { margin: 0 0 5px; font-size: .92rem; }
.collection-row p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.collection-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .67rem; }
.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--text); font-size: .95rem; }
.notes-shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 48px); }
.notes-index { padding: 22px 13px; border-right: 1px solid var(--line); background: #fcfcfb; }
.notes-index header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 13px; }
.notes-index h1 { margin: 0; font-size: 1.05rem; }
.note-item { display: block; width: 100%; padding: 10px; border-radius: 7px; text-align: left; }
.note-item:hover, .note-item.active { background: #ededeb; }
.note-item strong, .note-item span { display: block; }
.note-item strong { margin-bottom: 4px; font-size: .81rem; }
.note-item span { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.note-editor { width: 100%; max-width: 780px; margin: 0 auto; padding: 51px 70px 100px; }
.note-editor input { width: 100%; padding: 0; border: 0; outline: 0; font-size: 2rem; font-weight: 690; letter-spacing: -.04em; }
.note-editor textarea { width: 100%; min-height: 55vh; margin-top: 26px; padding: 0; border: 0; outline: 0; resize: none; font: inherit; font-size: .92rem; line-height: 1.7; }
.integration-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.integration-card span { color: var(--muted); font-size: .72rem; }
.disconnected { padding: 3px 7px; border-radius: 5px; background: var(--rose-bg); color: var(--rose) !important; }

/* dialogs */
dialog { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(20, 20, 18, .18); backdrop-filter: blur(2px); }
.command-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; }
.command-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.command-head input { flex: 1; border: 0; outline: 0; }
.command-head select { max-width: 150px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: .68rem; }
.command-results { max-height: 55vh; overflow: auto; padding: 10px; }
.command-results p { color: var(--muted); font-size: .76rem; }
.search-result { display: block; width: 100%; padding: 9px; border-radius: 7px; text-align: left; }
.search-result:hover { background: var(--chrome); }
.record-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; }
.record-dialog form { padding: 17px 22px; }
.record-dialog header, .record-dialog footer, .move-dialog header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.record-title { width: 100%; margin-top: 27px; border: 0; outline: 0; font-size: 1.3rem; font-weight: 650; }
.record-dialog textarea { width: 100%; min-height: 150px; margin-top: 14px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; line-height: 1.5; }
.record-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.record-fields label { display: grid; gap: 5px; color: var(--muted); font-size: .67rem; }
.record-fields input, .record-fields select { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.record-dialog footer { gap: 8px; margin-top: 18px; }.record-dialog footer span { flex: 1; }
.form-error { min-height: 18px; color: var(--rose); font-size: .7rem; }
.move-dialog { width: min(330px, calc(100vw - 28px)); padding: 15px; }
.move-dialog [role="group"] { display: grid; gap: 4px; margin-top: 13px; }
.move-dialog [role="group"] button, .more-dialog a, .more-dialog button { display: block; width: 100%; padding: 9px; border-radius: 6px; text-align: left; font-size: .78rem; }
.move-dialog [role="group"] button:hover, .more-dialog a:hover, .more-dialog button:hover { background: var(--hover); }
.more-dialog { width: min(300px, calc(100vw - 28px)); padding: 8px; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--chrome); }
.login-card { width: min(380px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.login-card h1 { margin: 22px 0 7px; font-size: 1.55rem; }.login-card p { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.login-card label { display: grid; gap: 6px; margin: 24px 0 12px; color: var(--muted); font-size: .69rem; }.login-card input { padding: 9px; border: 1px solid var(--line); border-radius: 7px; }.login-card .primary { width: 100%; }
.bottom-nav, .mobile-only { display: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .toolbar:has(.tasks-controls) { flex-wrap: wrap; }
  .toolbar-actions:has(.tasks-controls) { flex: 1 1 100%; width: 100%; }
  .tasks-controls { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); width: 100%; }
  .tasks-controls select, .tasks-controls button { width: 100%; min-width: 0; max-width: none; }
}

@media (pointer: coarse) {
  .date-picker-popover { display: none !important; }
  .date-control { position: relative; min-height: 24px; overflow: visible; }
  .task-meta .date-control { min-height: 18px; }
  .date-control:has(.date-native-clear) { padding-right: 34px; }
  .date-native-input, .deadline-input { position: absolute; z-index: 2; inset: -6px 0; width: 100%; height: calc(100% + 12px); margin: 0; border: 0; opacity: .01; pointer-events: auto; touch-action: manipulation; cursor: pointer; font-size: 16px; }
  .date-control:has(.date-native-clear) .date-native-input { right: 34px; width: auto; }
  .date-native-clear, .section-head .date-native-clear { position: absolute; z-index: 3; top: 50%; right: 0; display: grid; width: 28px; height: 28px; margin: 0; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: currentColor; font-size: 16px; line-height: 1; touch-action: manipulation; transform: translateY(-50%); }
  .date-control.empty .date-native-clear { display: none; }
  .date-native-clear:active { background: rgba(30, 30, 26, .08); }
}

@media (max-width: 760px) {
  .sidebar { display: none; }.workspace-frame { width: 100%; margin: 0; }.topbar { height: 45px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }.mobile-only { display: block; }.breadcrumbs span, .breadcrumbs b, .save-state span { display: none; }.breadcrumbs strong { font-size: .76rem; }.save-state i { margin-top: 0; }
  #content { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }.page { padding: 22px max(15px, env(safe-area-inset-right)) 70px max(15px, env(safe-area-inset-left)); }.page h1 { font-size: 1.55rem; }.page-description { max-width: 35rem; font-size: .76rem; }.page-head { align-items: flex-start; }.page-head .primary { width: 34px; overflow: hidden; padding: 0; font-size: 0; }.page-head .primary::after { content: "+"; font-size: 1rem; }
  .week-browser { grid-template-columns: 32px minmax(0, 1fr) 32px; margin-top: 18px; }.week-browser > button { width: 32px; height: 32px; }.toolbar { margin-top: 16px; }.scope-tabs { gap: 13px; }.toolbar-actions select { max-width: 94px; }
  .task-row { grid-template-columns: 16px 16px 18px minmax(0, 1fr) 48px; gap: 3px; }.drag-handle { width: 16px; }.drag-handle::before { inset: -8px -4px; }.task-expand-spacer, .subtask-toggle { width: 16px; }.task-title { font-size: .95rem; }.task-row-actions { gap: 0; }.task-delete, .task-more { width: 24px; opacity: 1; }.status-control { max-width: 100px; }.status-pill { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }.status-menu { width: 156px; }.status-menu button { min-height: 40px; padding: 10px; font-size: .78rem; }.subtask-list { margin-left: 16px; padding-left: 6px; }.subtask-list .task-row { grid-template-columns: 16px 16px 18px minmax(0, 1fr) 48px; }.new-list { grid-template-columns: 22px minmax(0, 1fr) minmax(100px, 122px); gap: 6px; }.new-list kbd { display: none !important; }.task-create, .subtask-create { grid-template-columns: 16px 16px 18px minmax(0, 1fr) 48px; gap: 3px; }.subtask-create { margin-left: 16px; padding-left: 6px; }
  .task-row.editing + .subtask-create { margin-left: 0; padding-left: 22px; }.task-row.editing + .subtask-create::before { left: 16px; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(57px + env(safe-area-inset-bottom)); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(248, 248, 246, .95); backdrop-filter: blur(18px); }.bottom-nav a, .bottom-nav button { position: relative; display: grid; min-width: 0; min-height: 44px; place-content: center; gap: 3px; color: var(--muted); font-size: .96rem; text-align: center; }.bottom-nav small { font-size: .6rem; }.bottom-nav .active { color: var(--text); font-weight: 650; }.bottom-nav .active::before { content: ""; position: absolute; top: 4px; left: 50%; width: 22px; height: 2px; border-radius: 2px; background: var(--blue); transform: translateX(-50%); }
  .notes-shell { display: block; }.notes-index { padding-top: 18px; border-right: 0; }.note-editor { padding: 30px 20px 90px; }.note-editor input { font-size: 1.7rem; }.record-fields { grid-template-columns: 1fr; }.demo-banner, .global-error { margin-inline: 10px; }
  .day-navigator { grid-template-columns: 34px minmax(0, 1fr) 34px; margin-top: 18px; }.day-navigator > button { width: 34px; height: 34px; }.day-navigator label, .day-navigator .date-control { min-height: 40px; }.toolbar:has(.tasks-controls) { flex-wrap: wrap; }.toolbar-actions:has(.tasks-controls) { flex: 1 1 100%; width: 100%; }.tasks-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }.tasks-controls .task-sort-control { grid-column: 1 / -1; }.tasks-controls select, .tasks-controls button { min-width: 0; width: 100%; max-width: 100%; }.lists-search { margin-top: 20px; }.global-new-list { margin-top: 14px; }.list-directory-row { gap: 9px; padding: 12px 3px; }.list-directory-row b { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }.task-surface { margin-top: 3px; }.tasks-create { min-height: 42px; }
  input, textarea, select, [contenteditable="true"] { font-size: 16px !important; }
  .scope-tag:focus-visible, .task-tag:focus-visible, .project-inline:focus-visible, .date-trigger:focus-visible, .deadline-trigger:focus-visible, .status-pill:focus-visible { outline: 2px solid #6d91ba; outline-offset: 2px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .page { padding-top: 20px; padding-inline: max(17px, env(safe-area-inset-left)) max(17px, env(safe-area-inset-right)); }
  .task-picker-popover { max-height: calc(100dvh - 20px); overscroll-behavior: contain; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.token-secret { -webkit-text-security: disc; }