:root {
  --bg: #f8fafc; --panel: #ffffff; --ink: #111827; --muted: #6b7280; --line: #e5e7eb;
  --accent: #2563eb; --ok: #16a34a; --warn: #d97706; --bad: #dc2626;
  --do: #16a34a; --ignore: #9ca3af; --discuss: #d97706; --partial: #7c3aed;
  --cat-EMPIRICAL: #0891b2; --cat-ARGUMENTATIVE: #b45309; --cat-STRUCTURAL: #7c3aed;
  --cat-CLARIFICATION: #059669; --cat-STRATEGIC: #be123c; --cat-EDITORIAL: #64748b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       color: var(--ink); background: var(--bg); }
button { font: inherit; cursor: pointer; }
select, input, textarea { font: inherit; }

/* header */
#hdr { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
       padding: .55rem .9rem; background: var(--panel); border-bottom: 1px solid var(--line);
       position: sticky; top: 0; z-index: 30; }
#hdr h1 { font-size: .95rem; margin: 0; font-weight: 600; }
#tabs { display: flex; gap: .25rem; }
#tabs button { border: 1px solid transparent; background: none; padding: .3rem .7rem; border-radius: 6px; color: var(--muted); }
#tabs button.active { background: #eef2ff; color: var(--accent); font-weight: 600; }
#tabs button .n { font-size: .75rem; background: var(--line); border-radius: 8px; padding: 0 .35rem; margin-left: .3rem; }
#hdr .spacer { flex: 1; }
#hdr .who { color: var(--muted); }
#hdr a { color: var(--accent); text-decoration: none; margin-right: .6rem; }
#hdr button.linky { border: none; background: none; color: var(--accent); padding: 0; }

/* main layout */
#main { padding: .9rem; max-width: 1100px; margin: 0 auto; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; align-items: center; color: var(--muted); }
.filters select { padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }

/* board */
.statusGroup { margin-bottom: 1.1rem; }
.statusGroup > h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--muted); margin: .2rem 0 .45rem; cursor: pointer; user-select: none; }
.row { display: flex; align-items: center; gap: .55rem; background: var(--panel); border: 1px solid var(--line);
       border-radius: 8px; padding: .45rem .7rem; margin-bottom: .35rem; cursor: pointer;
       transition: border-color .15s, box-shadow .15s; }
.row:hover { border-color: #c7d2fe; box-shadow: 0 1px 4px rgba(37,99,235,.08); }
.row .catdot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: none; }
.row .tid { font-family: ui-monospace, Menlo, monospace; font-size: .68rem; color: #b0b7c3; white-space: nowrap; }
.row .title { flex: 1; min-width: 12rem; }
.row .badges { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.row.done-row { opacity: .78; padding: .3rem .7rem; }
.row.done-row .title { color: var(--muted); }
.row.ghost { border-style: dashed; cursor: default; color: var(--muted); background: none; box-shadow: none; }
.badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 8px; color: #fff; background: var(--muted); white-space: nowrap; }
.badge.emph { background: var(--bad); }
.badge.cmt { background: none; color: var(--muted); border: 1px solid var(--line); }
.badge.doneby { background: none; color: var(--ok); border: none; font-size: .75rem; }
.badge.finalTag { background: none; border: 1px solid var(--line); color: var(--muted); }

/* avatars */
.avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex;
          align-items: center; justify-content: center; color: #fff; font-size: .62rem;
          font-weight: 700; letter-spacing: .02em; user-select: none; }
.avatar.unassigned { background: none; border: 1.5px dashed #c3c9d4; color: #9ca3af; font-weight: 400; }
.avatar.claim { cursor: pointer; }
.avatar.claim:hover { border-color: var(--accent); color: var(--accent); }

/* quick action buttons */
.qbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px;
        padding: .22rem .65rem; font-size: .82rem; white-space: nowrap; flex: none;
        transition: background .12s, color .12s; }
.qbtn.start { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.qbtn.start:hover { background: var(--accent); color: #fff; }
.qbtn.done { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.qbtn.done:hover { background: var(--ok); color: #fff; }
.qbtn.unblock { border-color: var(--warn); color: var(--warn); }
.qbtn.unblock:hover { background: var(--warn); color: #fff; }
.qbtn:disabled { opacity: .55; background: var(--panel); color: var(--muted); border-color: var(--line); }

/* header progress bar */
.pwrap { flex-basis: 100%; display: flex; align-items: center; gap: .7rem; margin-top: .15rem; }
.pbar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.pbar .seg { height: 100%; transition: width .4s ease; }
.pbar .seg.done { background: var(--ok); }
.pbar .seg.prog { background: var(--accent); }
.pbar .seg.blocked { background: var(--warn); }
.plabel { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* avatar filter chips */
.avchips { display: inline-flex; gap: .3rem; align-items: center; }
.avchip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
          padding: .15rem .45rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; }
.avchip.active { border-color: var(--accent); background: #eef2ff; color: var(--accent); font-weight: 600; }
.avchip .avatar { width: 18px; height: 18px; font-size: .55rem; }

/* decide cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; margin-bottom: .8rem; }
.card h3 { margin: 0 0 .2rem; font-size: .95rem; }
.card .gist { color: var(--muted); margin-bottom: .6rem; }
.votes3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.vote { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem; }
.vote .v { font-weight: 700; font-size: .78rem; }
.vote.do .v { color: var(--do); } .vote.ignore .v { color: var(--ignore); } .vote.discuss .v { color: var(--discuss); }
.vote .note { color: var(--muted); font-size: .82rem; margin-top: .2rem; white-space: pre-wrap; }
.decideRow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.decideRow input { flex: 1; min-width: 14rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: .35rem .7rem; }
.btn:hover { background: #f3f4f6; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.do { border-color: var(--do); color: var(--do); }
.btn.partial { border-color: var(--partial); color: var(--partial); }
.btn.ignore { border-color: var(--ignore); color: var(--muted); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .5; cursor: default; }

/* drawer */
#ovl { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 40; }
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 94vw); background: var(--panel);
          z-index: 50; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.15); padding: 1rem 1.2rem 3rem; }
#drawer h2 { margin: .1rem 0 .3rem; font-size: 1.05rem; }
#drawer .close { position: sticky; top: .2rem; float: right; border: none; background: var(--line); border-radius: 6px; padding: .2rem .55rem; }
#drawer h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem 0 .35rem; }
#drawer .desc { white-space: pre-wrap; }
blockquote { border-left: 3px solid var(--line); margin: .4rem 0; padding: .15rem .7rem; color: #374151; white-space: pre-wrap; }
blockquote .src { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.loc { font-size: .85rem; margin: .15rem 0; }
.loc code { background: #f3f4f6; padding: .05rem .3rem; border-radius: 4px; }
.chip { display: inline-block; font-size: .78rem; border: 1px solid var(--line); border-radius: 8px;
        padding: .05rem .45rem; margin: .1rem .2rem .1rem 0; cursor: pointer; background: var(--panel); }
.chip .st { color: var(--muted); }
.workCtl { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.workCtl label { color: var(--muted); font-size: .85rem; }
.workCtl select { padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.doneNote { color: var(--ok); font-size: .85rem; }
.resBox { border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; margin-top: .3rem; }
.resBox .cur { margin-bottom: .4rem; }
.final-do { color: var(--do); font-weight: 700; }
.final-ignore { color: var(--muted); font-weight: 700; }
.final-partial { color: var(--partial); font-weight: 700; }

/* comments */
.cmt { margin: .45rem 0; }
.cmt .meta { color: var(--muted); font-size: .78rem; }
.cmt .body { white-space: pre-wrap; }
.cmt.pending { opacity: .55; }
.composer { display: flex; gap: .5rem; margin-top: .5rem; align-items: flex-start; }
.composer textarea { flex: 1; min-height: 3.2rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }

/* activity */
.act { padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .87rem; display: flex; gap: .5rem; }
.act .when { color: var(--muted); white-space: nowrap; font-size: .78rem; padding-top: .1rem; }
.act .tid { font-family: ui-monospace, Menlo, monospace; color: var(--accent); cursor: pointer; }

/* toasts + banners */
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: .4rem; }
.toast { background: #111827; color: #f9fafb; border-radius: 8px; padding: .5rem .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.toast.err { background: var(--bad); }
#offline { position: fixed; top: 0; left: 0; right: 0; background: var(--warn); color: #fff; text-align: center;
           padding: .25rem; z-index: 95; font-size: .85rem; }

/* auth screens */
.authWrap { max-width: 380px; margin: 14vh auto 0; background: var(--panel); border: 1px solid var(--line);
            border-radius: 12px; padding: 1.4rem 1.6rem; }
.authWrap h1 { font-size: 1.05rem; margin: 0 0 .8rem; }
.authWrap label { display: block; color: var(--muted); font-size: .85rem; margin: .6rem 0 .2rem; }
.authWrap input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
.authWrap .btn { margin-top: 1rem; width: 100%; }
.authWrap .err { color: var(--bad); margin-top: .6rem; min-height: 1.2em; }
.authWrap .hint { color: var(--muted); font-size: .82rem; margin-top: .6rem; }

.empty { color: var(--muted); padding: 1.2rem; text-align: center; }
.adminBox { border: 1px dashed var(--line); border-radius: 8px; padding: .7rem .9rem; margin-top: 1.4rem; }
.adminBox h3 { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted); }
.adminBox .rowline { display: flex; gap: .6rem; align-items: center; margin: .25rem 0; flex-wrap: wrap; }
code.inv { background: #f3f4f6; padding: .1rem .3rem; border-radius: 4px; word-break: break-all; }