:root { --ink:#1c1e21; --soft:#61686f; --paper:#fbfaf8; --panel:#ffffff; --inset:#efece6; --line:#d8d4cc; --accent:#177d84; --accent-ink:#0f5a60; --crit:#b3363c; --high:#b4602a; --med:#8a7a24; --low:#5a6b5d; --chip-ink:#ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --ink:#e8e6e1; --soft:#a0a4a8; --paper:#16181a; --panel:#1f2225; --inset:#26292d; --line:#3a3e43; --accent:#4fc3cb; --accent-ink:#7fd8de; --crit:#e06c70; --high:#e09a5f; --med:#cbb95a; --low:#8fae94; --chip-ink:#16181a; } }
:root[data-theme=dark] { --ink:#e8e6e1; --soft:#a0a4a8; --paper:#16181a; --panel:#1f2225; --inset:#26292d; --line:#3a3e43; --accent:#4fc3cb; --accent-ink:#7fd8de; --crit:#e06c70; --high:#e09a5f; --med:#cbb95a; --low:#8fae94; --chip-ink:#16181a; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; color:var(--ink); background:var(--paper); }
header.top { display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--line); }
a.brand { font-weight:700; color:var(--accent-ink); text-decoration:none; }
nav.main { display:flex; gap:.75rem; }
nav.main a { color:var(--soft); text-decoration:none; padding:.15rem .5rem; border-radius:4px; }
nav.main a.here { color:var(--accent-ink); background:var(--inset); font-weight:600; }
button.theme { margin-left:auto; background:transparent; color:var(--soft); border:1px solid var(--line); }
main { max-width:80rem; margin:0 auto; padding:1rem; }
code { background:var(--inset); padding:.1em .3em; border-radius:3px; }
pre { background:var(--inset); padding:.75rem; overflow-x:auto; border-radius:4px; }
li.check { list-style:none; margin-left:-1.2rem; }
input, select, textarea, button { font:inherit; padding:.4rem .5rem; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:4px; }
button { background:var(--accent); color:var(--chip-ink); border-color:var(--accent); cursor:pointer; }
button.quiet { background:transparent; color:var(--ink); border-color:var(--line); }
.err { color:var(--crit); min-height:1.2em; }
.login { max-width:22rem; margin:3rem auto; display:grid; gap:.75rem; }
.login form { display:grid; gap:.75rem; }
.login label { display:grid; gap:.25rem; }
.boardbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.quickadd { display:flex; flex-wrap:wrap; gap:.4rem; flex:1; min-width:16rem; }
.quickadd input[name=title] { flex:1; min-width:12rem; }
.logout { margin-left:auto; }
.board { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); }
.col h2, section.lane > h2 { font-size:1rem; border-bottom:2px solid var(--line); padding-bottom:.3rem; }
.col h2 small, section.lane h2 small { color:var(--soft); font-weight:400; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.5rem .6rem; margin:.5rem 0; }
.card a { color:inherit; text-decoration:none; }
.card .actions { margin-top:.35rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.card .actions button { font-size:.78rem; padding:.15rem .5rem; }
.id { color:var(--accent-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.chip { display:inline-block; font-size:.75rem; padding:.05rem .45rem; border-radius:999px; border:1px solid var(--line); color:var(--soft); }
.chip.sev-critical { color:var(--chip-ink); background:var(--crit); border-color:var(--crit); }
.chip.sev-high { color:var(--chip-ink); background:var(--high); border-color:var(--high); }
.chip.sev-medium { color:var(--chip-ink); background:var(--med); border-color:var(--med); }
.chip.sev-low { color:var(--chip-ink); background:var(--low); border-color:var(--low); }
.chip.project, .chip.roi { color:var(--accent-ink); border-color:var(--accent); }
.count { color:var(--soft); font-size:.8rem; }
.chip.who { color:var(--accent-ink); }
dl.value { background:var(--inset); border-radius:6px; padding:.6rem .8rem; display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; }
dl.value dt { color:var(--soft); } dl.value dd { margin:0; }
.empty { color:var(--soft); }
section.lane { margin-bottom:1.6rem; }
.lane .cards { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); }
.item .chips { margin-top:-.5rem; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.latest { background:var(--inset); border-left:3px solid var(--accent); padding:.4rem .6rem; }
.controls { display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 0; }
.controls form { display:flex; gap:.35rem; align-items:center; }
.comment { display:grid; gap:.5rem; margin:1rem 0; }
.comment textarea { min-height:5rem; }
.hint { color:var(--soft); font-size:.85rem; }
.timeline { list-style:none; padding:0; display:grid; gap:.6rem; }
.timeline li { border-top:1px solid var(--line); padding-top:.5rem; }
.timeline .meta { display:block; color:var(--soft); font-size:.8rem; }
.timeline img, .desc img { max-width:100%; border:1px solid var(--line); border-radius:4px; }
.intake { max-width:44rem; display:grid; gap:1rem; }
.intake fieldset { border:1px solid var(--line); border-radius:6px; display:grid; gap:.6rem; padding:.8rem; }
.intake legend { font-weight:600; padding:0 .3rem; }
.intake label { display:grid; gap:.2rem; }
.intake .row { display:flex; gap:1rem; flex-wrap:wrap; }
.intake .row label { flex:1; min-width:9rem; }
.intake .boxes label { display:flex; gap:.4rem; align-items:center; }
@media (max-width:40rem) { .board { grid-template-columns:1fr; } }