/* ─────────────────────────────────────────────────────────────────────────────
 * css/quality-agent.css — layout for js/quality-agent.js (Quality → Release Queue)
 *
 * LAYOUT ONLY, every rule scoped under #tab-quality-agent so nothing here can restyle another
 * screen. Colours are --ds-* tokens; STATUS colour comes from dsBadge / .ds-badge--<tone>
 * (docs/design-system.md), never from this file.
 * ──────────────────────────────────────────────────────────────────────────── */

/* The page paints its own surface (#content is a light literal in both themes). */
#tab-quality-agent .qa-page{display:flex;flex-direction:column;gap:var(--ds-sp3);padding:var(--ds-sp4);min-width:0;
  background:var(--ds-bg0);color:var(--ds-text);border-radius:var(--ds-radius-lg)}
#tab-quality-agent .qa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-sp4);flex-wrap:wrap}
#tab-quality-agent .qa-head-text{min-width:0;flex:1 1 420px}
#tab-quality-agent .qa-title{margin:0;font-size:20px;font-weight:700;color:var(--ds-text)}
#tab-quality-agent .qa-sub{font-size:13px;color:var(--ds-text-muted);margin-top:3px;max-width:760px}
#tab-quality-agent .qa-run{font-size:12px;color:var(--ds-text-muted);margin-top:6px}
#tab-quality-agent .qa-head-actions{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}
#tab-quality-agent .qa-head-actions input[type=search]{min-width:220px;padding:6px 10px;border:1px solid var(--ds-border);
  border-radius:var(--ds-radius);background:var(--ds-bg1);color:var(--ds-text)}
#tab-quality-agent .qa-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--ds-border);padding-bottom:4px}
#tab-quality-agent .qa-tab{padding:6px 12px;color:var(--ds-text-muted)}
#tab-quality-agent .qa-tab.is-on{background:var(--ds-blue-dim);color:var(--ds-blue);font-weight:600}
#tab-quality-agent .qa-count{font-variant-numeric:tabular-nums;opacity:.8}
#tab-quality-agent .qa-view{display:flex;flex-direction:column;gap:var(--ds-sp3);min-width:0}

#tab-quality-agent .qa-scroll{overflow-x:auto;max-width:100%}
#tab-quality-agent .qa-table td{vertical-align:top}
#tab-quality-agent .qa-table tr.is-open td{background:var(--ds-blue-dim)}
#tab-quality-agent .qa-r{text-align:right;white-space:nowrap}
#tab-quality-agent .qa-small{font-size:12px;color:var(--ds-text-muted)}
#tab-quality-agent .qa-muted{color:var(--ds-text-dim)}
#tab-quality-agent .qa-warn{color:var(--ds-amber);font-weight:600}
#tab-quality-agent .qa-bad{color:var(--ds-red);font-weight:600}
#tab-quality-agent .qa-link{color:var(--ds-blue)}
#tab-quality-agent .qa-k{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-muted);margin:var(--ds-sp2) 0 4px}
#tab-quality-agent .qa-row{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap;margin-top:var(--ds-sp2)}
#tab-quality-agent .qa-decide{padding:var(--ds-sp2) 0}
#tab-quality-agent .qa-reason{width:100%;max-width:720px}

/* slice 2 (js/quality-desk.js) */
#tab-quality-agent .qa-h3{margin:var(--ds-sp3) 0 0;font-size:16px;color:var(--ds-text)}
#tab-quality-agent .qa-card{padding:var(--ds-sp3);display:flex;flex-direction:column;gap:var(--ds-sp2)}
#tab-quality-agent .qa-between{justify-content:space-between}
#tab-quality-agent .qa-urgent{margin-bottom:var(--ds-sp2);border-color:var(--ds-red);color:var(--ds-red)}

/* Receiving inspection decisions must show the live selected state. */
#qc-form .qc-disposition{min-height:76px;white-space:normal;text-align:left;display:flex;flex-direction:column;gap:6px;border-width:3px}
#qc-form .qc-disposition[aria-pressed="true"]{outline:3px solid var(--ds-blue);outline-offset:2px}
#qc-form [data-qc-selected]{font-weight:800}

#qc-form{color:var(--ds-text)}