/* Firstline > Needs action. Loaded after app.css and uses its tokens, so the accent color follows the brand. */
.manage-body section.queue { gap: 18px; }
.q-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.q-search { inline-size: min(300px, 100%); }
.q-filters { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px 16px; min-inline-size: 0; }
.q-org-pick { min-inline-size: 200px; }
.q-seg { max-inline-size: 100%; }
.q-seg > button { padding-inline: 12px; }
.q-list { display: grid; gap: 28px; min-inline-size: 0; margin-block-start: 8px; }
.q-group { display: grid; min-inline-size: 0; }
.q-when { display: flex; align-items: center; gap: 10px; margin: 0; padding-block-end: 8px; border-block-end: 1px solid var(--line); font: 600 14px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.q-mark { inline-size: 10px; block-size: 10px; background: var(--ink-muted); flex: none; }
.q-mark.now { background: var(--critical); }
.q-mark.today { background: var(--warn); }
.q-n { color: var(--ink-muted); }
.q-rows { list-style: none; margin: 0; padding: 0; }
.q-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px auto; grid-template-areas: "org main age acts" "err err err err"; gap: 4px 16px; align-items: center; padding: 12px 0; border-block-end: 1px solid var(--line); }
.q-org { grid-area: org; display: flex; align-items: center; min-inline-size: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.q-org .swatch { flex: none; }
.q-main { grid-area: main; display: grid; gap: 2px; min-inline-size: 0; }
.q-kind { font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.q-title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.q-detail { font-size: 14px; color: var(--ink-muted); overflow-wrap: anywhere; }
.q-age { grid-area: age; justify-self: end; font-size: 13px; color: var(--ink-muted); }
.q-acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.btn.q-btn { background: var(--band); box-shadow: none; }
.btn.q-btn:hover { background: var(--line); color: var(--ink); }
.q-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-inline-size: 0; }
.q-more-pick select { inline-size: auto; min-inline-size: 170px; }
.btn.q-btn:disabled { color: var(--ink-muted); }
.q-err { grid-area: err; }

@media (max-width: 640px) {
  .q-head { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; }
  .q-head .q-search { display: grid; inline-size: 100%; justify-self: stretch; }
  .q-filters { justify-items: stretch; }
  .q-kinds, .q-more-pick, .q-org-pick { inline-size: 100%; }
  .q-more-pick select { inline-size: 100%; }
  .q-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "org age" "main main" "acts acts" "err err"; gap: 6px 12px; }
  .q-acts { justify-content: start; }
  .q-acts .btn { flex: 1 1 auto; }
}