:root {
  --bg: #10141a;
  --panel: #171c24;
  --border: #2a3140;
  --text: #e4e8ef;
  --muted: #8b93a3;
  --accent: #6ea8fe;
  --todo: #8b93a3;
  --doing: #6ea8fe;
  --blocked: #e2703a;
  --done: #4caf7d;
  --dropped: #5a5f6a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

header h1 { font-size: 1.1rem; margin: 0; }

nav a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 1rem;
  font-size: 0.9rem;
}
nav a.active, nav a:hover { color: var(--accent); }

main { max-width: 720px; margin: 0 auto; padding: 1.5rem; }

.status { color: var(--muted); font-size: 0.85rem; min-height: 1.2em; margin-bottom: 0.5rem; }
.status.error { color: var(--blocked); }

ul { list-style: none; margin: 0; padding: 0; }

.today-list .today-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.today-item .crumb { color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
.today-item .title { flex: 1; }

.badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-todo .badge { color: var(--todo); border-color: var(--todo); }
.status-doing .badge { color: var(--doing); border-color: var(--doing); }
.status-blocked .badge { color: var(--blocked); border-color: var(--blocked); }
.status-done .badge { color: var(--done); border-color: var(--done); }
.status-dropped .badge { color: var(--dropped); border-color: var(--dropped); text-decoration: line-through; }

.tree-node { margin: 0; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  cursor: default;
}
.tree-row .toggle { width: 1rem; color: var(--muted); cursor: pointer; user-select: none; }
.tree-row .toggle.spacer { cursor: default; visibility: hidden; }
.tree-row .title { flex: 1; cursor: pointer; }
.tree-row .title:hover { color: var(--accent); }
.tree-children { padding-left: 1.25rem; display: none; }
.tree-node.expanded > .tree-children { display: block; }

.notes-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(360px, 90vw);
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 1.25rem;
  overflow-y: auto;
}
.notes-panel.hidden { display: none; }
.notes-panel h2 { font-size: 1rem; margin: 0 0 0.75rem; padding-right: 3rem; }
#notes-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; padding: 0.2rem 0.5rem; cursor: pointer; font-size: 0.75rem;
}
.note { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.note-meta { display: block; color: var(--muted); font-size: 0.7rem; margin-bottom: 0.2rem; }
.note-text { display: block; font-size: 0.9rem; white-space: pre-wrap; }

.empty { color: var(--muted); padding: 1rem 0; }