:root {
  --bg: #fbfaf7; --fg: #1d1d1b; --muted: #77746c; --line: #e4e1d9; --accent: #2f5d8a; --card: #fff; --due: #b5651d;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161615; --fg: #e8e6e1; --muted: #9a978f; --line: #2c2b28; --accent: #8ab4de; --card: #1e1e1c; --due: #e0a060; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
a { color: var(--accent); }
.muted, time { color: var(--muted); }
.spacer { flex: 1; }

/* Layout: header, sidebar, content */
header { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--fg); text-decoration: none; }
form.search input { width: 14rem; padding: .3rem .6rem; }
.layout { display: grid; grid-template-columns: 13rem minmax(0, 46rem); gap: 2rem; justify-content: center; padding: 1rem; }
.layout.anon { grid-template-columns: minmax(0, 28rem); }
aside { position: sticky; top: 1rem; align-self: start; }
aside h4 { margin: 1.25rem 0 .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 48rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  aside { position: static; display: grid; gap: .5rem; }
  aside h4 { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  form.search { order: 10; flex-basis: 100%; }
  form.search input { width: 100%; }
}

/* Chips: views, tags, spaces */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip {
  --h: var(--muted);
  display: inline-flex; gap: .35rem; align-items: center; white-space: nowrap;
  padding: .2rem .65rem; border-radius: 999px; text-decoration: none; color: var(--fg); font-size: .9rem;
  background: color-mix(in srgb, var(--h) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--h) 30%, transparent);
}
.chip:hover { background: color-mix(in srgb, var(--h) 22%, transparent); }
.chip.active { background: color-mix(in srgb, var(--h) 32%, transparent); border-color: var(--h); font-weight: 600; }
.chip .n { font-size: .75rem; color: var(--muted); }
.chip.sm { padding: 0 .5rem; font-size: .8rem; }
.more { font-size: .85rem; text-decoration: none; }
.tone0 { --h: #3b82f6; } .tone1 { --h: #10b981; } .tone2 { --h: #f59e0b; } .tone3 { --h: #ef4444; }
.tone4 { --h: #8b5cf6; } .tone5 { --h: #ec4899; } .tone6 { --h: #14b8a6; } .tone7 { --h: #84cc16; }

/* Forms */
textarea, input, select { width: 100%; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .5rem; }
input[type=date], input[type=checkbox], .capture select, .stack select { width: auto; }
button { font: inherit; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: inherit; cursor: pointer; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); }
form.inline { display: inline; }
.stack > * + * { margin-top: .75rem; display: block; }
.capture { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.capture .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Entries */
.entry { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; margin-bottom: .75rem; }
.entry.done .body, .entry.archived .body { opacity: .6; }
.entry .body > :first-child { margin-top: 0; }
.entry .body > :last-child { margin-bottom: 0; }
.entry footer { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; margin-top: .5rem; font-size: .875rem; }
.entry li.task { list-style: none; margin-left: -1.25rem; }
button.check { border: 0; background: none; padding: 0 .3rem 0 0; font-size: 1.1em; }
.due { color: var(--due); }
.space, .assignee { color: var(--muted); }

/* Misc pages */
.messages { list-style: none; padding: 0; margin-top: 0; }
.messages li { padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--card); margin-bottom: .5rem; }
.history { font-size: .875rem; color: var(--muted); }
.tags li, .spaces li, .members li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); list-style: none; }
.tags, .spaces, .members { padding: 0; }
.danger { margin-top: 2rem; }