/* Annotate view (queue · item · review form) and the embeddable feedback bar / review badge. Classes are prefixed an-. */
#v-annotate{grid-template-columns:270px minmax(0,1fr) 380px;grid-template-rows:minmax(0,1fr)}
.an-lbl{font:600 var(--fs-1)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--sp-1)}
.an-pad{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.an-in,.an-ta{width:100%;border:0;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);padding:0 var(--sp-2);font-size:var(--fs-3)}
.an-in{height:28px}
.an-ta{display:block;padding:var(--sp-2);line-height:20px;resize:vertical;min-height:64px}
.an-in::placeholder,.an-ta::placeholder{color:var(--fg-3)}
.an-thumb{font-size:var(--fs-2);line-height:18px}

/* ---------- queue ---------- */
.an-q{border-right:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;min-height:0;min-width:0}
.an-qh{height:44px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2) 0 var(--sp-4);flex:none}
.an-qh h2{margin:0;font-size:var(--fs-4);font-weight:600}
.an-qf{padding:0 var(--sp-3);flex:none}
.an-qf .seg{display:flex}.an-qf .seg button{flex:1;white-space:nowrap;padding:0 var(--sp-1)}
.an-search{margin:var(--sp-2) var(--sp-3) var(--sp-1);height:28px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2);border-radius:var(--r8);background:var(--bg);box-shadow:0 0 0 1px var(--line);color:var(--fg-3);flex:none}
.an-search:focus-within{box-shadow:0 0 0 1px var(--line-2)}
.an-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:var(--fs-2);color:var(--fg)}
.an-ql{flex:1;overflow:auto;min-height:0;padding:var(--sp-1) 0 var(--sp-3)}
.an-qi{padding-top:var(--sp-2);padding-bottom:var(--sp-2);gap:var(--sp-h) var(--sp-2)}
.an-qi .tm{gap:var(--sp-1)}
.an-qi .sub{display:flex;align-items:center;gap:var(--sp-2);overflow:hidden}
.an-qi .sub .ag{overflow:hidden;text-overflow:ellipsis;min-width:0}
.an-todo{font:500 var(--fs-1)/18px var(--mono);color:var(--fg-3);white-space:nowrap}
.an-qk{flex:none;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;font-size:var(--fs-1)}
.an-qk kbd+kbd{margin-left:calc(-1 * var(--sp-h))}

/* ---------- item ---------- */
.an-c{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.an-ch{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3) 0 var(--sp-5);height:44px;border-bottom:1px solid var(--line);flex:none;min-width:0;font-size:var(--fs-2)}
.an-ch .an-rid{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.an-ch .end{margin-left:auto;display:flex;gap:var(--sp-1);align-items:center;flex:none}
.an-ch .end .hint{margin-right:var(--sp-1)}
.an-ch .icon-btn{font-size:var(--fs-5)}
.an-cb{overflow:auto;flex:1;min-height:0;padding:var(--sp-5) var(--sp-5) var(--sp-7)}
.an-cin{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.an-cin>section{min-width:0}
.an-ques{font-size:var(--fs-5);line-height:24px;font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap}
.an-exp{border-radius:var(--r12);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);padding:var(--sp-3) var(--sp-4)}
.an-exp .an-lbl{color:var(--accent-deep)}
.an-exp-t{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-4);line-height:22px}
.an-card{border-radius:var(--r16);box-shadow:var(--sh-1);background:var(--bg);padding:var(--sp-3) var(--sp-4)}
.an-card .note{margin-bottom:var(--sp-2)}
.an-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line-soft);font-size:var(--fs-2);color:var(--fg-2);font-variant-numeric:tabular-nums}
.an-facts i{font-style:normal;color:var(--fg-3)}
.an-cin .sqlwrap{margin:0}

.an-steps{border-radius:var(--r16);box-shadow:var(--sh-1);background:var(--bg);overflow:hidden}
.an-steps-h{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:36px;padding:0 var(--sp-4) 0 var(--sp-3);text-align:left;border-radius:0}
.an-steps-h:hover{background:var(--bg-2)}
.an-steps-h .an-lbl{margin:0;color:var(--fg-2)}
.an-steps.open>.an-steps-h .chev{transform:rotate(90deg)}
.an-steps-b{display:none;border-top:1px solid var(--line)}
.an-steps.open>.an-steps-b{display:block}
.an-st{border-bottom:1px solid var(--line-soft)}.an-st:last-child{border-bottom:0}
.an-st.noted{box-shadow:inset 2px 0 0 var(--accent)}
.an-st-h{display:grid;grid-template-columns:32px 52px minmax(0,1fr) auto;align-items:center;gap:var(--sp-2);min-height:32px;padding:0 var(--sp-2) 0 0}
.an-st-h:hover,.an-st.open>.an-st-h{background:var(--bg-2)}
.an-st-n{font-family:var(--mono);font-size:var(--fs-1);color:var(--fg-3);text-align:right}
.an-st-ln{display:flex;align-items:center;gap:var(--sp-2);min-width:0;min-height:32px;text-align:left;border-radius:0;font-size:var(--fs-3);white-space:nowrap;overflow:hidden}
.an-st-ln b{font-weight:600;flex:none}
.an-st-ln .an-tx,.an-st-ln .tg{overflow:hidden;text-overflow:ellipsis;min-width:0}
.an-st-ln .tg{color:var(--fg-2)}
.an-st-ln .rs{flex:none;color:var(--fg-3);font-size:var(--fs-2);margin-left:auto;padding-left:var(--sp-2);font-variant-numeric:tabular-nums}
.an-st-ln .rs.bad{color:var(--signal)}
.an-sub{flex:none;font:500 var(--fs-1)/18px var(--mono);color:var(--fg-3)}
.an-st-add{color:var(--accent-deep);opacity:0}
.an-st-h:hover .an-st-add,.an-st-add:focus-visible,.an-st.noted .an-st-add{opacity:1}
.an-st-x{padding:var(--sp-2) var(--sp-4) var(--sp-3) calc(32px + 52px + var(--sp-4));background:var(--bg-2);border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.an-st-x .an-lbl{margin:0}
.an-pre{padding:var(--sp-2) var(--sp-3);background:var(--bg);border-radius:var(--r8);box-shadow:var(--sh-1);max-height:220px;overflow:auto}
.an-pre.bad{color:var(--signal)}
.an-prose{font-size:var(--fs-3);line-height:20px}
.an-st-notes:empty{display:none}
.an-st-notes{padding:var(--sp-1) var(--sp-3) var(--sp-2) calc(32px + 52px + var(--sp-4));display:flex;flex-direction:column;gap:var(--sp-2)}
.an-sn{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);border-radius:var(--r12);background:var(--accent-soft);font-size:var(--fs-3)}
.an-sn-b{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}
.an-sn-t{flex-basis:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.an-se{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r12);box-shadow:0 0 0 1px var(--accent);background:var(--bg)}
.an-se-r{display:flex;align-items:center;gap:var(--sp-1)}
.an-se-r .an-in{flex:1;min-width:0;margin:0 var(--sp-1)}
.an-rate{width:28px;height:28px;border-radius:var(--r8);font-size:var(--fs-3);flex:none;filter:grayscale(1);opacity:.6}
.an-rate:hover{background:var(--bg-3)}
.an-rate.on{background:var(--bg-3);box-shadow:0 0 0 1px var(--line-2);filter:none;opacity:1}

/* ---------- review form ---------- */
.an-r{border-left:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;min-height:0;min-width:0}
.an-rh{height:44px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);border-bottom:1px solid var(--line);flex:none}
.an-rh b{font-weight:600;font-size:var(--fs-4);flex:1}
.an-rb{flex:1;overflow:auto;min-height:0;padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.an-rf{flex:none;display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);background:var(--bg-2)}
.an-rf .btn{height:32px;justify-content:center}.an-rf .btn.primary{flex:1}
.an-rf kbd{background:transparent;box-shadow:none;color:inherit;opacity:.7}
.an-verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.an-v{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-h);height:68px;border-radius:var(--r12);background:var(--bg);box-shadow:0 0 0 1px var(--line-2);color:var(--fg-2)}
.an-v:hover{background:var(--bg-3)}
.an-v .g{font-size:var(--fs-5);line-height:20px}
.an-v b{font-weight:600;font-size:var(--fs-3);color:var(--fg)}
.an-v kbd{position:absolute;top:var(--sp-1);right:var(--sp-1)}
.an-v.ok .g{color:var(--ok)}.an-v.warn .g{color:var(--warn)}.an-v.err .g{color:var(--err)}
.an-v.on.ok{background:var(--ok-soft);box-shadow:0 0 0 1.5px var(--ok)}.an-v.on.ok b{color:var(--ok)}
.an-v.on.warn{background:var(--warn-soft);box-shadow:0 0 0 1.5px var(--warn)}.an-v.on.warn b{color:var(--warn)}
.an-v.on.err{background:var(--err-soft);box-shadow:0 0 0 1.5px var(--err)}.an-v.on.err b{color:var(--err)}
.an-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.an-chip{height:24px;padding:0 var(--sp-2);border-radius:var(--r-full);font-size:var(--fs-2);background:var(--bg);box-shadow:0 0 0 1px var(--line-2);color:var(--fg-2);white-space:nowrap}
.an-chip:hover{background:var(--bg-3);color:var(--fg)}
.an-chip.on.bad{background:var(--err-soft);color:var(--err);box-shadow:0 0 0 1px var(--err)}
.an-chip.on.good{background:var(--ok-soft);color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.an-promo{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-1)}
.an-promo .an-in{flex:1;min-width:0}.an-promo .btn{height:28px}
.an-hi{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3);border-radius:var(--r12);background:var(--bg);box-shadow:var(--sh-1);margin-bottom:var(--sp-2);font-size:var(--fs-2)}
.an-hi-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-h)}
.an-hi-t{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.an-hi-t b{font-weight:600;font-size:var(--fs-3)}
.an-hi-l{color:var(--fg-2)}.an-hi-n{overflow-wrap:anywhere}
.an-hi .icon-btn{width:24px;height:24px;font-size:var(--fs-4);flex:none}
.an-hi .icon-btn:hover{color:var(--err)}

/* ---------- widgets: feedback bar and badge (used outside this view) ---------- */
.an-fb{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;min-height:24px;opacity:.45;transition:opacity .12s}
.an-fb:hover,.an-fb:focus-within,.an-fb.rated,.an-fb.open{opacity:1}
.an-fb>button{height:24px;width:28px;border-radius:var(--r8);font-size:var(--fs-2)}
.an-fb>button:hover{background:var(--bg-3)}
.an-fb>button.on{background:var(--bg-3);box-shadow:0 0 0 1px var(--line-2)}
.an-fbst{font-size:var(--fs-1);min-width:0}
.an-fbst:empty{display:none}
.an-fbn{display:inline-flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;min-width:0}
.an-fbcats{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1)}
.an-fbcats button{height:22px;padding:0 var(--sp-2);border-radius:var(--r-full);font-size:var(--fs-1);background:var(--bg-3);color:var(--fg-2);white-space:nowrap}
.an-fbcats button:hover{color:var(--fg)}
.an-fbcats button.on.bad{background:var(--err-soft);color:var(--err)}
.an-fbcats button.on.good{background:var(--ok-soft);color:var(--ok)}
.an-fbn input{height:26px;border:0;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);padding:0 var(--sp-2);font-size:var(--fs-2);width:280px;max-width:100%}
.an-fb-full{height:24px;padding:0 var(--sp-1);font-size:var(--fs-2);color:var(--accent-deep)}
.an-fb-full:hover{text-decoration:underline dotted}
.an-badge{display:inline-flex;align-items:center;gap:var(--sp-1);vertical-align:middle}
.an-badge:empty{display:none}
.an-badge-n{font:500 var(--fs-1)/18px var(--mono);color:var(--fg-3)}

@media (max-width:1280px){#v-annotate{grid-template-columns:240px minmax(0,1fr) 340px}}
@media (max-width:1000px){#v-annotate{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.an-q{grid-row:1/3}.an-r{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:700px){#v-annotate{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.an-q{display:none}}