:root {
  color-scheme:light;
  --surface:#fcfcfa;
  --text:#252a26;
  --muted:#626b62;
  --line:#e3e7df;
  --accent:#356047;
  --accent-hover:#264c36;
  --tint:#eef3ec;
  --error:#a13830;
  --radius:10px;
  --control:#6f7e69;
  --motion:160ms;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif;
  color:var(--text);
  background:var(--surface);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,textarea {
  font:inherit;
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button {
  color:inherit;
}

button,input,textarea {
  touch-action:manipulation;
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

input,textarea {
  caret-color:var(--accent);
}

::selection {
  background:#dce9dc;
  color:var(--text);
}

[hidden] {
  display:none!important;
}

svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.app {
  width:min(100%,768px);
  margin:0 auto;
  padding:96px 24px 40px;
}

.page-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:36px;
}

h1 {
  font-size:32px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.03em;
  margin:0;
}

.title-dot {
  color:var(--accent);
  margin-left:3px;
}

.tagline {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:10px 0 0;
}

.header-right {
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:2px;
}

time {
  font-size:13px;
  white-space:nowrap;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.icon-button {
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  padding:0;
  transition:background var(--motion),color var(--motion);
}

.icon-button:hover {
  background:var(--tint);
  color:var(--text);
}

.menu-wrap {
  position:relative;
}

.menu {
  position:absolute;
  right:0;
  top:46px;
  width:158px;
  background:#fff;
  border:1px solid var(--line);
  padding:6px;
  border-radius:var(--radius);
  z-index:5;
}

.menu button {
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:12px;
  border-radius:6px;
  font-size:14px;
}

.menu button:hover {
  background:var(--tint);
}

.add-form {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #ccd5ca;
  border-radius:var(--radius);
  padding:8px 8px 8px 18px;
  transition:border-color 160ms;
  min-height:64px;
}

.add-form:focus-within {
  border-color:var(--accent);
  outline:1px solid var(--accent);
  outline-offset:0;
}

.add-icon {
  color:var(--accent);
}

.add-form input {
  border:0;
  outline:0;
  min-width:0;
  flex:1;
  width:0;
  background:none;
  color:var(--text);
  padding:10px 0;
  font-size:16px;
  line-height:1.5;
}

.add-form input::placeholder {
  color:var(--muted);
}

.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:12px 17px;
  font-size:14px;
  line-height:20px;
  white-space:nowrap;
  transition:background 160ms;
}

.primary-button:hover:not(:disabled) {
  background:var(--accent-hover);
}

.primary-button:disabled {
  background:#e8ece5;
  color:#727a70;
}

.primary-button svg {
  width:16px;
  height:16px;
}

.list-section {
  margin-top:40px;
  min-height:292px;
}

.list-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:12px;
}

.filters {
  display:flex;
  align-self:stretch;
  gap:28px;
  min-width:0;
}

.filter {
  padding:0 0 15px;
  min-height:48px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.filter.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.filter:hover {
  color:var(--text);
}

.filter span {
  font-size:12px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  background:#eff1ec;
  border-radius:5px;
  padding:1px 5px;
  min-width:18px;
  text-align:center;
}

.filter.active span {
  background:#e7eee3;
  color:var(--accent);
}

.search-toggle {
  margin-bottom:4px;
}

.search-form {
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 0;
  padding:4px 0 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}

.search-form input {
  flex:1;
  min-width:0;
  padding:8px 0;
  border:0;
  outline:0;
  background:none;
  font-size:14px;
  color:var(--text);
}

.search-form:focus-within {
  border-bottom-color:var(--accent);
}

.search-form input::placeholder {
  color:var(--muted);
}

.text-button {
  background:none;
  border:0;
  color:var(--accent);
  font-size:13px;
  padding:10px 4px;
  white-space:nowrap;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.text-button:hover {
  text-decoration:underline;
}

.list-status {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

.list-status:not(:empty) {
  padding-top:14px;
}

.todo-list {
  list-style:none;
  padding:0;
  margin:0;
}

.todo-item {
  border-bottom:1px solid var(--line);
}

.todo-row {
  display:flex;
  align-items:flex-start;
  min-height:72px;
  padding:12px 0;
  gap:8px;
}

.check-button {
  width:44px;
  height:44px;
  margin-left:-12px;
  margin-top:-5px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  border-radius:8px;
  color:var(--control);
}

.check-button:hover {
  background:var(--tint);
  color:var(--accent);
}

.check-shape {
  width:20px;
  height:20px;
  border:1.5px solid currentColor;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 160ms,border-color 160ms;
}

.check-shape svg {
  width:15px;
  height:15px;
  stroke-width:2;
  visibility:hidden;
}

.completed .check-shape {
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}

.completed .check-shape svg {
  visibility:visible;
}

.todo-content {
  flex:1;
  min-width:0;
  text-align:left;
  background:none;
  border:0;
  padding:4px 0;
  line-height:1.6;
  border-radius:4px;
  cursor:default;
  overflow-wrap:anywhere;
}

.todo-title {
  display:block;
  font-size:16px;
  line-height:1.6;
}

.todo-notes {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:6px;
  white-space:pre-wrap;
}

.completed .todo-title {
  text-decoration:line-through;
  text-decoration-color:#aab4a7;
  color:var(--muted);
}

.row-actions {
  display:flex;
  align-items:center;
  padding-top:0;
  margin-top:-5px;
  gap:2px;
}

.star-button {
  color:var(--control);
}

.star-button[aria-pressed=true] {
  color:var(--accent);
}

.star-button[aria-pressed=true] svg {
  fill:#e3ecdf;
}

.todo-item.busy {
  opacity:.55;
  pointer-events:none;
}

.editor {
  padding:20px 0 22px 38px;
}

.editor label {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:0 0 8px;
}

.editor input,.editor textarea {
  display:block;
  width:100%;
  border:1px solid #ccd5ca;
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:11px 12px;
  font-size:15px;
  line-height:1.6;
}

.editor input:focus,.editor textarea:focus {
  outline:1px solid var(--accent);
  border-color:var(--accent);
}

.editor textarea {
  resize:vertical;
  min-height:96px;
  max-height:360px;
  margin-bottom:0;
}

.editor .notes-label {
  margin-top:16px;
}

.editor-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.editor-right {
  display:flex;
  gap:14px;
}

.danger-button {
  color:var(--error);
}

.empty-state {
  text-align:center;
  padding:54px 16px 40px;
}

.empty-mark {
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  background:var(--tint);
  border-radius:50%;
  color:var(--accent);
}

.empty-mark svg {
  width:27px;
  height:27px;
}

.empty-state h2 {
  font-size:17px;
  font-weight:500;
  line-height:1.6;
  margin:0 0 8px;
}

.empty-state p {
  font-size:14px;
  line-height:1.8;
  margin:0 auto;
  max-width:29em;
  color:var(--muted);
}

.loading-state {
  padding:18px 0;
}

.loading-state span {
  display:block;
  height:16px;
  background:#edf0e9;
  border-radius:4px;
  width:55%;
  margin:22px 0 32px 38px;
}

.loading-state span:nth-child(2) {
  width:38%;
}

.loading-state span:nth-child(3) {
  width:46%;
}

.page-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
  padding-top:4px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}

.save-status {
  display:flex;
  align-items:center;
  gap:7px;
}

.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

.save-status.error .status-dot {
  background:var(--error);
}

.save-status.saving .status-dot {
  background:#9c8554;
}

.shortcut-hints {
  display:flex;
  align-items:center;
  gap:6px;
}

.hint-divider {
  padding:0 6px;
  color:#adb5a8;
}

kbd {
  font:inherit;
  font-size:11px;
  border:1px solid var(--line);
  min-width:20px;
  height:20px;
  text-align:center;
  border-radius:4px;
}

.error-banner {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:16px;
  padding:12px 16px;
  background:#fcf0ed;
  border-radius:8px;
  color:var(--error);
  font-size:13px;
  line-height:1.6;
}

.error-banner p {
  margin:0;
  flex:1;
}

.error-banner button {
  background:transparent;
  border:0;
  color:var(--error);
  font-size:13px;
  font-weight:600;
  padding:8px;
}

.toast {
  position:fixed;
  bottom:max(28px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:20px;
  padding:9px 12px 9px 20px;
  background:#283a2d;
  color:#fff;
  border-radius:10px;
  max-width:calc(100vw - 32px);
  font-size:14px;
  line-height:1.5;
  z-index:10;
  box-shadow:0 8px 28px #1b302020;
}

.toast span {
  overflow-wrap:anywhere;
}

.toast button {
  background:none;
  border:0;
  color:#e0eedc;
  font-size:14px;
  white-space:nowrap;
  padding:9px 2px;
}

.toast #undo-button {
  text-decoration:underline;
  text-underline-offset:4px;
}

.toast .toast-dismiss {
  width:32px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.toast svg {
  width:16px;
  height:16px;
}

.restore-button {
  align-self:center;
}

.deleted .todo-title {
  color:var(--muted);
}

@media(hover:none) {
  .icon-button {
    width:44px;
    height:44px;
  }
  .check-button {
    width:44px;
  }
  .row-actions {
    gap:0;
  }
  .search-toggle {
    margin-bottom:6px;
  }
}

@media(max-width:600px) {
  .app {
    padding:40px 20px 28px;
  }
  .page-header {
    margin-bottom:28px;
    gap:16px;
  }
  .header-right {
    gap:5px;
  }
  h1 {
    font-size:30px;
  }
  time {
    font-size:12px;
  }
  .tagline {
    font-size:13px;
  }
  .add-form {
    padding-left:12px;
    gap:8px;
  }
  .add-form input {
    font-size:16px;
  }
  .primary-button {
    padding:12px 14px;
  }
  .add-form .primary-button svg {
    display:none;
  }
  .list-section {
    margin-top:32px;
    min-height:300px;
  }
  .filters {
    gap:20px;
  }
  .todo-row {
    gap:4px;
  }
  .todo-title {
    font-size:16px;
  }
  .row-actions .icon-button {
    width:44px;
    height:44px;
  }
  .editor {
    padding-left:0;
  }
  .page-footer {
    margin-top:24px;
  }
  .shortcut-hints {
    display:none;
  }
  .empty-state {
    padding-top:50px;
  }
  .toast {
    bottom:max(20px,env(safe-area-inset-bottom));
    gap:14px;
    width:max-content;
  }
  .filter {
    font-size:13px;
  }
  .filter span {
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.todo-title-button {
  display:block;
  text-align:left;
  padding:0;
  border:0;
  background:none;
  line-height:1.6;
  width:100%;
  overflow-wrap:anywhere;
}

.todo-title-button:hover {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:#aebfa8;
  text-underline-offset:4px;
}

.todo-notes a {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:#aebfa8;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}

.todo-notes a:hover {
  text-decoration-color:var(--accent);
}

.todo-notes.expanded {
  display:block;
  overflow:visible;
}

.notes-expand {
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:12px;
  min-height:28px;
  padding:2px 0;
  line-height:20px;
}

.notes-expand svg {
  width:16px;
  height:16px;
  transition:transform var(--motion);
}

.notes-expand[aria-expanded=true] svg {
  transform:rotate(180deg);
}

.category-filters {
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:16px -6px 4px;
}

.category-filter {
  border:0;
  background:none;
  color:var(--muted);
  font-size:13px;
  padding:7px 10px;
  min-height:36px;
  border-radius:6px;
}

.category-filter:hover {
  color:var(--accent);
  background:var(--tint);
}

.category-filter.active {
  color:var(--accent);
  background:var(--tint);
  font-weight:500;
}

.todo-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 14px;
  min-height:24px;
  margin-top:2px;
}

.category-label {
  font-size:12px;
  color:var(--muted);
  line-height:20px;
}

.editor #edit-category {
  max-width:220px;
  margin-bottom:20px;
}

@media(max-width:600px) {
  .category-filter {
    min-height:44px;
  }
  .category-filters {
    gap:4px 6px;
    margin-top:12px;
  }
}

.resource-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:32px;
  max-width:100%;
  padding:3px 0;
  vertical-align:middle;
}

.resource-link span {
  min-width:0;
  overflow-wrap:anywhere;
}

.resource-link svg {
  width:14px;
  height:14px;
  opacity:.7;
}

.todo-notes .resource-link:hover {
  color:var(--accent-hover);
}

.mobile-edit-hint {
  display:none;
}

.icon-button:active,.check-button:active {
  background:#e3ecdf;
}

.primary-button:active:not(:disabled) {
  background:#203e2d;
}

.filter:disabled,.text-button:disabled {
  opacity:.55;
}

.editor-actions {
  padding-top:2px;
}

.editor .primary-button {
  min-width:76px;
}

@media(max-width:600px) {
  .mobile-edit-hint {
    display:inline;
  }
  .empty-state p {
    max-width:23em;
  }
  .todo-row {
    gap:6px;
  }
  .todo-meta {
    gap:3px 12px;
  }
  .page-footer {
    font-size:11px;
  }
  .check-button {
    margin-left:-10px;
  }
}

/* A shared passphrase opens the remote list; no private content is rendered here. */
.access-screen {
  width: min(100%, 416px);
  margin: 0 auto;
  padding: 112px 24px 48px;
}
.access-description {
  margin: 14px 0 36px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.login-form label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.login-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #ccd5ca;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  padding: 12px 14px;
  font-size: 18px;
}
.login-form input:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}
.login-form input::placeholder {
  font-size: 15px;
  color: var(--muted);
}
.login-form .primary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
}
.access-error {
  font-size: 14px;
  line-height: 1.7;
  color: var(--error);
  margin: 18px 0 0;
}
@media (max-width: 600px) {
  .access-screen { padding-top: 64px; }
}

.draft-recovery { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.7; }
.draft-recovery summary { cursor: pointer; color: var(--muted); }
.draft-recovery pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }