:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #2a2f3a;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --accent: #5b9dff;
  --accent-ink: #0b1220;
  --feature: #4c8dff;
  --bug: #ff6b6b;
  --progress: #f2c94c;
  --blocked: #ff8a65;
  --done: #4cd08a;
  --danger: #e5484d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0 0 .5rem; }
h2 { font-size: 1rem; letter-spacing: .02em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--panel-2); padding: 0 .3em; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel);
}
.brand { font-weight: 700; color: var(--text); }
.me { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.me form { margin: 0; }

.avatar { border-radius: 50%; vertical-align: middle; background: var(--panel-2); }

button, .button, select, input, textarea {
  font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
}
button, .button { padding: .35rem .8rem; cursor: pointer; display: inline-block; }
button:hover, .button:hover { border-color: var(--accent); text-decoration: none; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.link { background: none; border: none; color: var(--accent); padding: 0; }
.small-btn { padding: .15rem .5rem; font-size: .8rem; }
select { padding: .15rem .3rem; font-size: .8rem; }
input, textarea { padding: .4rem .5rem; width: 100%; }

.narrow { max-width: 640px; margin: 3rem auto; padding: 0 1rem; }
.center { text-align: center; }
.projects { list-style: none; padding: 0; }
.projects li { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; background: var(--panel); }

.tag { display: inline-block; font-size: .72rem; padding: 0 .45em; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.tag-feature { color: var(--feature); border-color: var(--feature); }
.tag-bug { color: var(--bug); border-color: var(--bug); }
.tag-progress { color: var(--progress); border-color: var(--progress); }
.tag-section { color: var(--text); }
.tag-pr-open { color: var(--done); border-color: var(--done); }
.tag-pr-draft { color: var(--muted); }
.tag-pr-merged { color: #b392f0; border-color: #b392f0; }
.tag-pr-closed { color: var(--danger); border-color: var(--danger); }

.notice, .warning { padding: .6rem .8rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--progress); }

/* Dashboard */
.dashboard { padding: 1rem; max-width: 1400px; margin: 0 auto; }
.project-name { text-align: center; font-size: 1.8rem; margin-top: .5rem; }
.project-sub { text-align: center; margin-top: -.2rem; }
.small-heading { font-size: .8rem; text-transform: uppercase; color: var(--muted); }
.whos-on-what { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin: 1rem 0; }
.holders { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.holder { display: flex; align-items: center; gap: .5rem; }

.create { margin-bottom: 1rem; }
.create > summary { list-style: none; }
.create > summary::-webkit-details-marker { display: none; }
.create-form { display: grid; gap: .6rem; max-width: 560px; margin-top: .6rem; background: var(--panel); padding: .8rem; border-radius: 10px; border: 1px solid var(--border); }
.create-form label { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.col { display: grid; gap: 1rem; }
.lane { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; }
.lane.large { min-height: 260px; }
.lane.compact { min-height: 0; }
.lane.compact .cards { max-height: 260px; overflow-y: auto; }
#lane-notStarted h2 { color: var(--feature); }
#lane-inProgress h2 { color: var(--progress); }
#lane-completed h2 { color: var(--done); }
#lane-openIssues h2 { color: var(--bug); }
#lane-blocked h2 { color: var(--blocked); }
.lane details > summary { cursor: pointer; display: flex; align-items: baseline; gap: .6rem; }
.lane details > summary h2 { display: inline; margin: 0; }
.count { color: var(--muted); font-weight: 400; font-size: .85rem; }
.empty { color: var(--muted); font-size: .85rem; margin: .3rem 0; }

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.card-main { min-width: 0; }
.card-title { color: var(--text); font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.card-actions { display: flex; gap: .3rem; align-items: center; flex-shrink: 0; }
.card-actions form { margin: 0; display: flex; gap: .2rem; }
.claim { border-color: var(--progress); }
.lane.compact .card { padding: .3rem .5rem; }

/* Item page */
.item { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.item-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.item-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .8rem; margin-bottom: 1rem; }
.prose { white-space: pre-wrap; word-wrap: break-word; }
.comments { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.comment { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; background: var(--panel-2); }
.comment.progress { border-color: var(--progress); }
.comment-head { margin-bottom: .3rem; font-size: .85rem; }
.plain { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row form { margin: 0; display: flex; gap: .3rem; }
.handoff textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; margin-bottom: .5rem; resize: vertical; }
.progress-form { display: grid; gap: .4rem; margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }

@media (max-width: 860px) {
  .columns, .item-grid { grid-template-columns: 1fr; }
  .card { flex-direction: column; align-items: stretch; }
}