`
trần trong cùng wrapper nên không thoát. Trong một scrollport thì 0 là offset đúng — không có
topbar nào bên trong wrapper để phải né. */
.mxwrap th{top:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:var(--panel-2)}
td.num,.nowrap{white-space:nowrap}
td .mono,.count{font-family:var(--mono); font-variant-numeric:tabular-nums}
/* ─────────────────────────── tài liệu ─────────────────────────── */
.docgroup{margin:0 0 18px}
.kindhead,.doc-h{
display:flex; align-items:center; gap:9px; margin:0 0 8px;
font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.kindnote,.note,.cmt-note{color:var(--muted); font-size:12px; line-height:1.6}
/* Ghi chú ledger có thể dài hơn nghìn ký tự. Trong bảng nó thu về đúng một dòng — thiết bị đo
không để một hàng cao hơn màn hình — và click mở đầy đủ (app.js noteCell / toggleNote). */
.note{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
overflow-wrap:anywhere; cursor:pointer;
}
.note:hover{color:var(--ink)}
.note.open{-webkit-line-clamp:unset}
/* Cột note giữ một phần cố định của hàng (không phải "phần còn lại"), nên mở một ghi chú ra
thì chỉ hàng đó cao lên — các cột trạng thái, artifact bên cạnh không nhảy. Trạng thái và
badge không bao giờ xuống dòng; đường dẫn chỉ gãy tại dấu "/" (app.js pathLabel). */
.notecol{width:38%; min-width:26ch}
.pathcol{min-width:16ch}
.pathcol .file{white-space:normal}
.seg{white-space:nowrap}
.kindblock{display:grid; gap:6px}
/* `.doc` là một hàng đứng riêng; `.file` là một LINK trong ô bảng. Gộp style hai thứ này
biến mọi tên file trong bảng thành một cái hộp dài ngắn tuỳ tên — cột không còn thẳng. */
.doc{
display:flex; align-items:center; gap:10px; padding:8px 12px;
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
cursor:pointer; transition:border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.doc:hover{border-color:var(--accent); background:var(--panel); transform:translateX(2px)}
.file{
font-family:var(--mono); font-size:12px; color:var(--accent);
cursor:pointer; border-bottom:1px solid transparent; transition:border-color .16s var(--ease);
}
.file:hover{text-decoration:none; border-bottom-color:var(--accent)}
/* bảng tài liệu: cột đầu co giãn, các cột meta bám phải và không xuống dòng */
.doclist{margin:0 0 4px}
.doclist td{padding:5px 11px 5px 0; border-bottom:1px solid var(--line)}
.doclist td:first-child{width:46%}
.doclist tr:last-child td{border-bottom:0}
.doc-name{font-family:var(--mono); font-size:12px; color:var(--ink); flex:1; min-width:0; overflow-wrap:anywhere}
.orphan{opacity:.62}
.empty{color:var(--faint); font-style:italic; font-size:12.5px; padding:14px 0}
.sev{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; font-weight:500}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--muted); padding:10px 0 0}
.legend>*{display:inline-flex; align-items:center; gap:6px}
.toc{display:grid; gap:5px; font-size:12.5px}
.cmt{
background:var(--panel-2); border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:11px 14px; margin:10px 0; font-size:12.5px; color:var(--ink-2);
}
.log{
max-height:280px; overflow:auto; font-family:var(--mono); font-size:11px; line-height:1.75;
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
}
code,.mono{font-family:var(--mono); font-size:12px}
:not(pre)>code{background:var(--panel-3); padding:1.5px 5px; border-radius:4px; font-size:11.5px; color:var(--ink-2)}
/* ─────────────────────────── markdown ─────────────────────────── */
/* 78ch là bề rộng đọc văn xuôi. Nhưng tài liệu ở đây là bảng, read-trace và khối lệnh —
giới hạn chúng ở 78ch bỏ trống nửa hộp thoại mà không ai đọc dễ hơn. Văn bản giữ 78ch,
bảng và code được phép tràn hết. */
.md{font-size:14px; line-height:1.72; color:var(--ink-2)}
.md>p,.md>ul,.md>ol,.md>blockquote,.md>h1,.md>h2,.md>h3,.md>h4{max-width:82ch}
.md h1,.md h2,.md h3,.md h4{color:var(--ink); font-weight:600; letter-spacing:-.01em; line-height:1.3; margin:1.9em 0 .6em}
.md h1{font-size:23px} .md h2{font-size:19px} .md h3{font-size:16px} .md h4{font-size:14px}
.md h1:first-child,.md h2:first-child{margin-top:0}
.md h2{padding-bottom:.34em; border-bottom:1px solid var(--line)}
.md p{margin:0 0 1.05em}
.md ul,.md ol{margin:0 0 1.05em; padding-left:1.35em}
.md li{margin:.28em 0}
.md table{margin:1.2em 0; font-size:12.5px; width:100%}
.md table th{position:static} /* trong hộp thoại, header bảng không được dính theo trang */
.md td,.md th{padding:7px 12px}
.md blockquote{margin:1.2em 0; padding:2px 0 2px 16px; border-left:2px solid var(--accent); color:var(--muted)}
.md pre{
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
padding:13px 15px; overflow:auto; margin:1.2em 0;
}
.md pre code{font-family:var(--mono); font-size:11.5px; line-height:1.65; background:none; padding:0}
.md code{font-family:var(--mono); font-size:.88em}
.md hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.md img{max-width:100%}
/* ─────────────────────────── dialog ─────────────────────────── */
dialog{
border:1px solid var(--line-2); border-radius:var(--r); padding:0;
background:var(--panel); color:var(--ink);
width:min(1080px,94vw); max-height:88vh; box-shadow:var(--shadow-lift);
}
dialog::backdrop{background:rgba(4,8,14,.62); backdrop-filter:blur(3px)}
dialog>header{
position:static; height:auto; padding:13px 17px; gap:10px;
background:var(--panel-2); backdrop-filter:none;
}
#vwrap{padding:20px 24px 26px; overflow:auto; max-height:calc(88vh - 56px)}
button{
appearance:none; font-family:var(--sans); font-size:12px; font-weight:500;
padding:5px 12px; border-radius:var(--r-sm); cursor:pointer;
background:var(--panel); color:var(--ink-2); border:1px solid var(--line);
transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
button:hover{border-color:var(--line-2); color:var(--ink); background:var(--panel-3)}
button.tog[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
/* ─────────────────────────── diagram ─────────────────────────── */
.dgwrap{
overflow:auto; background:var(--panel-2); border:1px solid var(--line);
border-radius:var(--r-sm); padding:16px;
}
.dg{min-width:100%}
.dg-node{cursor:pointer; transition:opacity .16s var(--ease)}
.dg-node:hover{opacity:.8}
.dg-step{font-family:var(--mono); font-size:10px}
/* ───────────────── mức nghiêm trọng & phán quyết cổng ─────────────────
Ba con số blocker/major/minor luôn đứng cạnh nhau, nên chúng phải đọc được
thành một hình: đỏ đậm → hổ phách → xám. Số 0 chìm đi, số khác 0 nổi lên —
mắt tìm cái đang cháy, không phải đọc cả ba. */
.sev{gap:3px}
.sev b{
display:inline-flex; align-items:center; justify-content:center;
min-width:21px; height:19px; padding:0 5px; border-radius:4px;
font-family:var(--mono); font-size:10.5px; font-weight:700;
font-variant-numeric:tabular-nums; border:1px solid transparent;
}
.s-b{background:var(--fail-bg); color:var(--fail); border-color:var(--fail-line)}
.s-m{background:var(--wait-bg); color:var(--wait); border-color:var(--wait-line)}
.s-n{background:var(--skip-bg); color:var(--skip); border-color:var(--skip-line)}
/* một hạng mục bằng 0 không đáng chiếm sự chú ý ngang một hạng mục đang cháy */
.sev b:where([data-zero]),.s-b:empty,.s-m:empty,.s-n:empty{opacity:.4}
/* phán quyết cổng — cùng bảng màu với trạng thái, nhưng đặc hơn: đây là kết luận, không phải tiến độ */
.tag.fail,.chip.fail,.gatebox.fail,.gate.fail{background:var(--fail-bg); color:var(--fail); border-color:var(--fail)}
.tag.wait,.chip.wait,.gatebox.wait,.gate.wait{background:var(--wait-bg); color:var(--wait); border-color:var(--wait-line)}
.tag.idle,.chip.idle,.gatebox.idle,.gate.idle{background:var(--idle-bg); color:var(--idle); border-color:var(--idle-line)}
.gatebox.done,.gate.done{background:var(--done-bg); color:var(--done); border-color:var(--done-line)}
/* ───────────────── trang chi tiết một bước ─────────────────
`.step` là card của đúng một bước đang được mở. Nó không cạnh tranh với các card
khác trên trang vì nó là thứ duy nhất trên trang — nên nó được rộng hơn và có
một gờ accent để mắt biết mình đang đứng ở đâu trong lộ trình. */
.card.step{padding:22px 24px; border-left:2px solid var(--accent)}
.card.step>.page-title{margin-bottom:14px}
/* ─────────────────────────── ma trận toàn cảnh ───────────────────────────
Mỗi hàng một dự án, mỗi cột một bước. Ở dạng này "danh mục đang ở đâu" là một
hình nhìn thấy được, không phải kết luận rút ra sau khi đọc lần lượt từng card. */
.mxwrap{overflow-x:auto; margin:0 -4px}
/* width:auto — với width:100% cột tên dự án nuốt hết chỗ thừa và đẩy dải ô sang tận mép
phải, nên hai thứ cần đọc cạnh nhau (tên và tiến trình của nó) lại nằm hai đầu màn hình. */
.mxt{width:auto; min-width:min(100%,760px); border-collapse:separate; border-spacing:3px 4px}
.mxt th,.mxt td{border:0; padding:0}
.mx-h{
width:30px; font-family:var(--mono); font-size:10px; font-weight:500; color:var(--faint);
text-align:center; padding-bottom:5px !important; position:static; background:none;
letter-spacing:0; text-transform:none;
}
.mx-p{
text-align:left; padding-right:18px !important; width:1px; white-space:nowrap;
position:static; background:none; border:0; text-transform:none; letter-spacing:0;
}
.mx-p a{display:flex; flex-direction:column; line-height:1.34}
.mx-p a:hover{text-decoration:none}
.mx-p b{font-size:12.5px; color:var(--ink)}
.mx-p .meta{font-size:10.5px}
.mx-c{width:30px}
.mx{
display:flex; align-items:center; justify-content:center; height:28px; border-radius:5px;
background:var(--idle-bg); border:1px solid var(--idle-line);
transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.mx:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none; z-index:2}
.mx.done{background:var(--done-bg); border-color:var(--done-line)}
.mx.running{background:var(--run-bg); border-color:var(--run); box-shadow:0 0 12px -3px var(--accent-glow)}
.mx.waiting-approval{background:var(--wait-bg); border-color:var(--wait-line)}
.mx.failed,.mx.blocked{background:var(--fail-bg); border-color:var(--fail-line)}
.mx.skipped{background:var(--skip-bg); border-color:var(--skip-line)}
.mx-n{
text-align:right; padding-left:16px !important; white-space:nowrap; width:1px;
font-size:11.5px; color:var(--muted); position:static; background:none;
text-transform:none; letter-spacing:0; font-weight:400;
}
thead .mx-n{font-size:10px; color:var(--faint)}
/* hàng đợi hành động — thứ duy nhất trên trang chủ đòi một con người làm gì đó */
.card.urgent{border-color:var(--wait-line); box-shadow:0 0 0 1px var(--wait-line), var(--shadow-2)}
.card.urgent>h2{color:var(--wait)}
.ok{color:var(--done); font-size:13px; display:flex; align-items:center; gap:8px}
.ok::before{content:'✓'; font-weight:700}
.card>h2 .count{
display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:19px;
padding:0 6px; margin-left:7px; border-radius:99px; background:var(--wait-bg); color:var(--wait);
border:1px solid var(--wait-line); font-family:var(--mono); font-size:10.5px; font-weight:700;
}
/* ─────────────────────────── rail dọc + chi tiết ───────────────────────────
Strip ngang cũ bị cắt ở bước thứ bảy, nên nửa sau lộ trình — đúng nửa chứa các
cổng kiểm toán — không tồn tại với người chỉ nhìn màn hình. Rail dọc luôn hiện đủ. */
.split{display:grid; grid-template-columns:274px 1fr; gap:20px; align-items:start}
@media (max-width:1080px){ .split{grid-template-columns:1fr} .rail{position:static !important} }
.rail{
position:sticky; top:80px; display:flex; flex-direction:column; gap:2px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:6px;
box-shadow:var(--shadow-1); max-height:calc(100vh - 96px); overflow:auto;
}
.rl{
display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm);
color:var(--ink-2); border-left:2px solid transparent;
transition:background .14s var(--ease), border-color .14s var(--ease);
}
.rl:hover{background:var(--panel-2); text-decoration:none}
.rl.on{background:var(--accent-soft); border-left-color:var(--accent); color:var(--ink)}
.rl.on .rl-t{color:var(--accent); font-weight:600}
.rl-n{width:20px; flex:none; font-size:10.5px; color:var(--faint); text-align:right}
.rl-b{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3}
.rl-t{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-s{font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl-g{
flex:none; font-family:var(--mono); font-size:10px; font-weight:700; padding:1px 6px;
border-radius:99px; background:var(--wait-bg); color:var(--wait); border:1px solid var(--wait-line);
}
.rl-g.bad{background:var(--fail-bg); color:var(--fail); border-color:var(--fail-line)}
.detail{min-width:0}
/* ─────────────────────────── tài liệu: thu gọn + tìm ─────────────────────────── */
.dochd{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 0 12px}
.dochd h3{margin:0; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.docq{
flex:1; min-width:190px; max-width:340px; appearance:none;
padding:6px 11px; border-radius:var(--r-sm); border:1px solid var(--line);
background:var(--panel-2); color:var(--ink); font-family:var(--mono); font-size:11.5px;
transition:border-color .16s var(--ease), background .16s var(--ease);
}
.docq:focus{outline:0; border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 3px var(--accent-glow)}
.docq::placeholder{color:var(--faint)}
.kindblock{margin:0 0 4px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.kindblock.open{border-color:var(--line-2)}
.kindhead{
display:flex; align-items:center; gap:9px; width:100%; text-align:left;
padding:8px 12px; border:0; border-radius:0; background:var(--panel-2);
font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); cursor:pointer;
}
.kindhead:hover{background:var(--panel-3); color:var(--ink)}
.kindhead code{background:none; padding:0; font-size:11px; color:inherit; letter-spacing:.06em}
.kindhead .count{
font-family:var(--mono); font-size:10.5px; color:var(--faint);
background:var(--panel-3); padding:1px 7px; border-radius:99px; letter-spacing:0;
}
.caret{color:var(--faint); font-size:10px; width:9px; flex:none}
.kindbody{padding:11px 12px 6px; border-top:1px solid var(--line)}
.docgroup{margin:0 0 16px}
.docgroup>h4{
margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.09em;
text-transform:uppercase; color:var(--faint);
}
.docgroup>h4 .count{font-family:var(--mono); color:var(--muted)}
/* Ghi chú ledger có thể dài hơn nghìn ký tự; không cắt thì một dòng đẩy hết bảng
ra khỏi màn hình. Cắt bốn dòng, bấm để mở — kiểm tra bởi tests/run-tests.sh §11. */
.note{-webkit-line-clamp:4; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden}
.note.open{-webkit-line-clamp:unset; display:block}
/* .dot là inline-block ở mọi ô bảng: trong | nó bị inline hoá và biến mất — §11 canh dòng này */
td .dot{display:inline-block; vertical-align:middle; margin-right:6px}
/* ─────────────────────────── hộp xem tài liệu ───────────────────────────
Tiêu đề tách hai tầng: tên file là thứ người ta tìm, thư mục là thứ người ta cần khi
đi hỏi ai đó "file nào". Gộp thành một chuỗi `a/b/c/d.md` thì cả hai đều khó đọc. */
.vhead{
position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px;
padding:12px 14px 12px 18px; background:var(--panel-2); border-bottom:1px solid var(--line);
}
.vname{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3}
.vname strong{font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* không dùng direction:rtl để cắt đầu đường dẫn — nó đẩy dấu chấm của ".migurei" ra sau
và biến một đường dẫn có thật thành một đường dẫn không tồn tại. */
.vname .meta{font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ibtn{
flex:none; width:30px; height:28px; display:flex; align-items:center; justify-content:center;
padding:0; font-size:13px; line-height:1; color:var(--muted);
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.ibtn:hover{color:var(--ink); border-color:var(--line-2); background:var(--panel-3)}
.vfoot{
position:sticky; bottom:0; padding:8px 18px; background:var(--panel-2);
border-top:1px solid var(--line); font-size:10.5px;
}
#vwrap{padding:22px 26px 26px; overflow:auto; max-height:calc(88vh - 104px)}
/* --- trang login ------------------------------------------------------------------
Không dùng biến màu nào chưa có: trang này phải render đúng kể cả khi ai đó đổi bảng màu,
và nó là trang duy nhất một người thấy trước khi biết dashboard trông thế nào.
Thay biến: --card → --panel, --fg → --ink, --fail-fg → --fail (ba biến brief dùng mà
:root chưa có; --line, --muted, --bg, --accent, --fail-bg, --fail-line đã có sẵn). */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;
padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.loginbrand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.08em;
font-size:15px;margin-bottom:2px}
.loginhint{margin:0 0 8px;font-size:13px;color:var(--muted)}
.loginbox label{font-size:12px;color:var(--muted);margin-top:4px}
.loginbox input{padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--line);
border-radius:8px;background:var(--bg);color:var(--ink)}
.loginbox button{margin-top:14px;padding:10px;font:inherit;font-weight:600;cursor:pointer;
border:0;border-radius:8px;background:var(--accent);color:#fff}
.loginerr{padding:9px 11px;border-radius:8px;font-size:13px;
background:var(--fail-bg);color:var(--fail);border:1px solid var(--fail-line)}
.loginfoot{margin:12px 0 0;font-size:12px;color:var(--muted);white-space:pre-line}
.loginlangs{margin-top:14px; text-align:center; font-size:11.5px; color:var(--muted)}
.loginlangs a{color:var(--muted)}
/* --- topbar account block ---------------------------------------------------------
Built by app.js renderTopbar() from viewer.role, not hidden by CSS — see the comment
at web/app.html's #views container. */
.who{cursor:default;font-weight:600}
#account .segbtn{text-decoration:none}
/* --- admin page (renderAdmin, hblab-only) ---------------------------------------
`.acts` là một div BÊN TRONG ô, không phải chính ô. Đặt display:flex lên ` | ` thì ô thôi
là table-cell, và một table-cell giãn tới chiều cao của row còn một flex box chỉ cao bằng
nội dung — nên border-bottom của nó vẽ cao hơn border của các ô kia 3-4px và đường kẻ giữa
hai row bị bậc ở cột cuối. Cột vẫn thẳng hàng hoàn hảo về left và width, nên lỗi này sống
sót qua một lần kiểm: nó nằm trọn ở trục dọc. Cùng họ với `td .dot` ở trên. */
.acts{display:flex;gap:4px;flex-wrap:wrap}
.acts .segbtn{padding:3px 7px;font-size:11px}
.segbtn.danger{color:var(--fail)}
.addrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.addrow input,.addrow select,.au-form input,.au-form select{padding:7px 9px;font:inherit;
font-size:13px;border:1px solid var(--line);border-radius:7px;background:var(--bg);
color:var(--ink)}
/* --- admin detail (renderAdminUser, hblab-only) ---------------------------------
Nhãn bên trái, control bên phải, một cột nhãn cố định — không dùng flex tự co, vì bề rộng
nhãn khi ấy đổi theo độ dài chuỗi và ba dòng của cùng một form không thẳng hàng nhau. */
.au-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.au-head>h2{margin:0!important;font-family:var(--mono);font-size:15px!important;
letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.au-head .segbtn{text-decoration:none}
.au-facts{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 22px;font-size:12.5px}
.au-facts>div{display:flex;flex-direction:column;gap:2px}
.au-facts .meta{font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.au-form{display:grid;gap:12px;max-width:760px}
.au-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center}
.au-row>span:first-child{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted)}
.au-projrow{align-items:start}
.au-projrow>span:first-child{padding-top:7px}
.au-row input,.au-row select{width:100%}
.au-form>.meta{margin:-4px 0 0;font-size:12px;line-height:1.6}
/* Một cột trên mọi bề rộng: mỗi dòng là một quyết định cấp quyền, và hai dòng cạnh nhau làm
người đọc quét ngang trong khi câu hỏi ("tài khoản này xem được những gì") là một danh sách. */
.pboxes{display:grid;gap:2px}
.pbox{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);
cursor:pointer;font-size:12.5px}
.pbox:hover{background:var(--panel-2)}
.pbox input{width:auto;margin:0;flex:none;accent-color:var(--accent);cursor:pointer}
.pbox input:disabled{cursor:default}
.pbox:has(input:disabled){opacity:.5;cursor:default}
.pbox .meta{font-size:11.5px}
.au-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
padding-top:6px;border-top:1px solid var(--line)}
.segbtn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
font-weight:600}
.segbtn.primary:hover{background:var(--accent);color:var(--accent-ink)}
|