.bar { display:flex; gap:20px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
.progress { text-align:right; font-size:.86rem; color:var(--muted); min-width:220px; }
.progress strong { color:var(--ink); font-size:1.1rem; }
.meter { height:6px; background:var(--bg3); border-radius:99px; margin:5px 0 3px; overflow:hidden; }
.meter span { display:block; height:100%; background:var(--green); transition:width .2s; }

.filters { display:flex; gap:8px; flex-wrap:wrap; padding:14px 0; position:sticky; top:0; background:var(--bg); z-index:4; }
.filters button { font-size:.83rem; }
.filters button.on { background:var(--accent); border-color:var(--accent); color:#fff; }

.rows { list-style:none; margin:0; padding:0; }
.row { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:5px; background:var(--bg2); border:1px solid transparent; border-radius:var(--radius); }
.row.done { background:color-mix(in srgb, var(--green) 7%, var(--bg2)); }
.row:focus-within { border-color:var(--accent); }
.meta { min-width:240px; flex:1; }
.name { font-weight:600; font-size:.95rem; display:block; }
.facts { font-size:.77rem; color:var(--muted); }

.answer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.answer label { display:flex; gap:5px; align-items:center; font-size:.76rem; color:var(--muted); }
.answer input { width:78px; padding:6px 8px; font:inherit; font-size:.85rem; color:var(--ink);
  background:var(--bg3); border:1px solid var(--line); border-radius:7px; }
.answer input:focus { outline:none; border-color:var(--accent); }
.answer select { padding:6px 6px; font:inherit; font-size:.82rem; color:var(--ink);
  background:var(--bg3); border:1px solid var(--line); border-radius:7px; }
.answer button[type=submit] { background:var(--accent); border-color:var(--accent); color:#fff; font-size:.82rem; }
.answer .err { color:var(--red); font-size:.75rem; }
.pill { background:var(--bg3); padding:4px 10px; border-radius:99px; font-size:.8rem; font-weight:600; }
.clear { font-size:.74rem; color:var(--muted); }
.more { color:var(--muted); font-size:.82rem; padding:16px 2px; }

@media (max-width:700px) {
  .row { flex-direction:column; align-items:stretch; }
  .answer { justify-content:space-between; }
}
.answers { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.pill { display:inline-flex; gap:6px; align-items:center; }
.pill.usual { background:color-mix(in srgb, var(--green) 25%, var(--bg3)); }
.pill button { background:none; border:none; padding:0 2px; color:var(--muted); font-size:.9rem; line-height:1; }
.pill button:hover { color:var(--red); }
.answer.extra { opacity:.75; }
.answer.extra:focus-within { opacity:1; }
.answer .chk { gap:4px; }
.answer .chk input { width:auto; }