:root { --ink:#2b2b2b; --soft:#6d6e71; --paper:#fafbf7; --panel:#ffffff; --inset:#eef4e3; --line:#dcdfd6; --accent:#4c8a1f; --accent-ink:#3d711a; --accent-soft:#a5cf74; --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:#79c042; --accent-ink:#9bd16a; --accent-soft:#4c8a1f; --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:#79c042; --accent-ink:#9bd16a; --accent-soft:#4c8a1f; --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; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; padding:.5rem 1rem; background:#000; border-bottom:3px solid #79c042; }
a.brand { display:flex; gap:.6rem; align-items:center; font-weight:700; color:#79c042; text-decoration:none; }
a.brand img { display:block; height:34px; width:auto; }
a.brand span { border-left:1px solid #3f4442; padding-left:.6rem; }
nav.main { display:flex; gap:.75rem; flex-wrap:wrap; }
nav.main a { color:#b7bcb2; text-decoration:none; padding:.15rem .5rem; border-radius:4px; }
nav.main a.here { color:#0c1206; background:#79c042; font-weight:600; }
button.theme { margin-left:auto; background:transparent; color:#b7bcb2; border:1px solid #3f4442; }
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; }
.err.ok { color:var(--low); }
.controls label { display:flex; gap:.3rem; align-items:center; color:var(--soft); font-size:.85rem; }
.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(--accent-soft); 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); }
.chip.sandbox { color:var(--chip-ink); background:var(--high); border-color:var(--high); font-weight:600; align-self:center; }
.chip.wc-maintenance { border-color:var(--low); }
.chip.wc-development { border-color:var(--accent); }
.tally { display:inline-flex; gap:.3rem; align-items:center; }
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; }
.talk { max-width:44rem; margin-bottom:1.5rem; display:grid; gap:.5rem; }
.talk textarea { min-height:4.5rem; width:100%; }
.talk .log { display:grid; gap:.4rem; }
.msg { margin:0; padding:.45rem .6rem; border-radius:6px; max-width:95%; }
.msg.you { background:var(--inset); justify-self:end; }
.msg.bot { background:var(--panel); border:1px solid var(--accent); }
.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; flex-wrap:wrap; }
.controls .boxes { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.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; }
.tabs { display:flex; gap:.4rem; margin-bottom:.8rem; }
.tabs a { color:var(--soft); text-decoration:none; padding:.25rem .7rem; border:1px solid var(--line); border-radius:999px; }
.tabs a.here { color:var(--accent-ink); border-color:var(--accent); background:var(--inset); font-weight:600; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:6px; }
table.rank { border-collapse:collapse; width:100%; font-size:.88rem; background:var(--panel); }
table.rank th, table.rank td { padding:.4rem .55rem; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
table.rank th { position:sticky; top:0; background:var(--inset); font-size:.78rem; font-weight:600; border-bottom:2px solid var(--accent-soft); }
table.rank th a { color:var(--soft); text-decoration:none; }
table.rank th.sorted a { color:var(--accent-ink); }
table.rank th.rank, table.rank td.rank { text-align:right; color:var(--soft); width:2.5rem; }
table.rank th.what, table.rank td.what { text-align:left; white-space:normal; min-width:16rem; }
table.rank td.what a { color:inherit; text-decoration:none; }
table.rank tbody tr:hover { background:var(--inset); }
table.rank td { font-variant-numeric:tabular-nums; }
table.rank .st, table.rank .for { color:var(--soft); font-size:.78rem; }
table.rank td.act { text-align:left; }
table.rank td.act button { font-size:.75rem; padding:.1rem .45rem; }
.dim { color:var(--soft); }
.soft { color:var(--soft); font-size:.85rem; }
.chip.warn { border-color:var(--high); color:var(--high); }
.needs { margin-top:1.5rem; }
.needs h2 { font-size:1rem; border-bottom:2px solid var(--accent-soft); padding-bottom:.3rem; }
.needs h2 small { color:var(--soft); font-weight:400; }
ul.plain { list-style:none; padding:0; display:grid; gap:.35rem; }
ul.plain a { color:inherit; text-decoration:none; }
.effort { display:grid; gap:.8rem; margin:1rem 0; }
.effort form { border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; }
.effort h3 { margin:0; font-size:.9rem; width:100%; color:var(--soft); }
.effort label { display:grid; gap:.2rem; font-size:.8rem; color:var(--soft); }
.effort .row { display:flex; gap:.6rem; flex-wrap:wrap; width:100%; }
.effort input[type=number] { width:7rem; }
.tabs a small { color:var(--soft); font-weight:400; margin-left:.15rem; }
.cards { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); }
.chip.stage { color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.chip.cat { border-style:dashed; }
.chip.act { color:var(--accent-ink); border-color:var(--accent); text-decoration:none; }
.lineage { background:var(--inset); border-left:3px solid var(--accent); padding:.45rem .7rem; border-radius:0 4px 4px 0; margin:.6rem 0; }
.lineage.none { border-left-color:var(--line); color:var(--soft); }
.lineage a { color:inherit; }
.lineage h3 { margin:0 0 .4rem; font-size:.92rem; }
.lineage h3 small { color:var(--soft); font-weight:400; }
.lineage .st, .program .st { color:var(--soft); font-size:.8rem; }
.program { border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; margin:.8rem 0; background:var(--panel); }
.program h2 { margin:0 0 .3rem; font-size:1.05rem; border:0; }
.program h2 a { color:var(--accent-ink); text-decoration:none; }
.program .chips { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.2rem 0 .5rem; }
.program ul.plain a { color:inherit; }
form.advance button { font-weight:600; }
main.wide { max-width:112rem; }
.withrail { display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr) 30rem; align-items:start; }
.withrail > .item { min-width:0; }
aside.rail { min-width:0; position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--accent); border-radius:8px; background:var(--panel); padding:.9rem 1rem; display:grid; gap:.5rem; align-content:start; }
aside.rail textarea { min-height:5rem; width:100%; }
@media (max-width:78rem) { .withrail { grid-template-columns:1fr; } aside.rail { position:static; max-height:none; } }
details.summary { border:1px solid var(--accent); border-radius:8px; background:var(--inset); padding:.55rem .8rem; }
details.summary > summary { cursor:pointer; list-style:none; color:var(--accent-ink); }
details.summary > summary::-webkit-details-marker { display:none; }
details.summary h4 { margin:.7rem 0 .3rem; font-size:.8rem; color:var(--soft); text-transform:uppercase; letter-spacing:.04em; }
details.basis { margin-top:.6rem; font-size:.85rem; }
details.basis > summary { cursor:pointer; color:var(--soft); }
details.basis p { background:var(--panel); border-radius:6px; padding:.45rem .6rem; margin:.35rem 0 0; white-space:pre-wrap; }
details.loghistory { min-width:0; }
details.summary[open] > summary, details.loghistory[open] > summary { border-bottom:1px solid var(--line); padding-bottom:.45rem; margin-bottom:.5rem; }
.thread { display:grid; gap:.35rem; }
details.turn { border:1px solid var(--line); border-radius:6px; background:var(--inset); }
details.turn > summary { cursor:pointer; padding:.4rem .55rem; font-size:.85rem; list-style:none; }
details.turn > summary::-webkit-details-marker { display:none; }
details.turn[open] > summary { border-bottom:1px solid var(--line); }
details.turn .asked { padding:.45rem .55rem; font-size:.82rem; white-space:pre-wrap; color:var(--soft); background:var(--panel); }
details.turn .answer { padding:.45rem .55rem; font-size:.85rem; }
details.turn .answer p { margin:.3rem 0; }
.turnmeta { display:block; color:var(--soft); font-size:.72rem; margin-top:.25rem; }
p.spend { font-size:.82rem; color:var(--soft); background:var(--inset); border-radius:6px; padding:.35rem .6rem; margin:0; }
p.who { font-size:.8rem; color:var(--soft); margin:.5rem 0 0; }
p.who.fell { color:var(--high); }
.askrow { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.askrow label { display:flex; gap:.3rem; align-items:center; color:var(--soft); font-size:.85rem; }
dialog#name-dialog { max-width:34rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); padding:1.1rem 1.3rem; }
dialog#name-dialog::backdrop { background:rgba(0,0,0,.55); }
dialog#name-dialog h3 { margin:0 0 .4rem; font-size:1.05rem; }
dialog#name-dialog label { display:grid; gap:.25rem; margin:.6rem 0; font-size:.85rem; color:var(--soft); }
dialog#name-dialog input { font-size:1.05rem; }
.suggestions { display:grid; gap:.4rem; margin:.6rem 0; }
button.suggestion { display:grid; gap:.15rem; text-align:left; background:var(--inset); color:var(--ink); border:1px solid var(--line); padding:.45rem .6rem; }
button.suggestion strong { color:var(--accent-ink); font-size:1rem; }
button.suggestion span { color:var(--soft); font-size:.8rem; }
.talk.research { max-width:100%; }
.talk.research h3 { margin:0; font-size:1rem; color:var(--accent-ink); }
.talk.research h4 { margin:.8rem 0 .3rem; font-size:.85rem; color:var(--soft); text-transform:uppercase; letter-spacing:.04em; }
.talk.research .scope { background:var(--inset); border-radius:6px; padding:.5rem .7rem; font-size:.92rem; }
ul.qs { list-style:none; padding:0; display:grid; gap:.4rem; margin:0; }
ul.qs li { border-left:2px solid var(--line); padding:.1rem .6rem; }
ul.qs li span { display:block; color:var(--soft); font-size:.85rem; }
table.est { border-collapse:collapse; font-size:.9rem; }
table.est th { text-align:left; font-weight:500; color:var(--soft); padding:.15rem .8rem .15rem 0; }
table.est td { font-variant-numeric:tabular-nums; padding:.15rem 0; }
p.basis { background:var(--inset); border-radius:6px; padding:.5rem .7rem; font-size:.9rem; }
p.ready { font-size:.9rem; padding:.35rem 0; }
p.ready.yes { color:var(--low); font-weight:600; }
p.ready.no { color:var(--soft); }
.hint.muted { font-style:italic; }
#use-estimate { margin-top:.4rem; }
@media (max-width:40rem) { .board { grid-template-columns:1fr; } a.brand img { height:26px; } }