/* =============================================================================
   CIWI / Bahanding Limpyo — additive styles.
   styles.css is the original design and is untouched; these rules cover
   components that did not exist in it.
   Moved out of index.html for FE-6: a Content-Security-Policy worth having
   should not need to allow inline <style> blocks.
============================================================================= */

/* Additive only. styles.css is the original design and is untouched;
   these rules cover components that did not exist in it. */
.evidence-zone { border:1px dashed var(--line); border-radius:10px; padding:14px; margin:4px 0 10px; }
.evidence-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.evidence-actions .upload { margin:0; flex:0 0 auto; }
#evidence-preview { margin-top:12px; }
#evidence-thumb { max-width:230px; max-height:180px; border-radius:8px;
                  border:1px solid var(--line); display:block; object-fit:cover; }
#evidence-caption { display:block; color:var(--muted); font-size:11px; margin-top:6px; }
#evidence-status { margin-top:10px; }
.decide-box { display:flex; flex-direction:column; gap:5px; min-width:190px; }
.decide-box select, .decide-box input { font-size:11px; padding:5px 6px; width:100%; }
.decide-box > span { display:flex; gap:5px; }
.decide-box > span button { flex:1; }
.modal-backdrop video { display:block; }

/* Queue pager (FE-2). */
.queue-pager {
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  justify-content:space-between; padding:12px 4px 4px; font-size:13px;
  color:var(--muted);
}
.queue-pager b { color:var(--text, inherit); font-variant-numeric:tabular-nums; }
.queue-pager button { font-size:12px; padding:5px 10px; }
.queue-pager button:disabled { opacity:.4; cursor:not-allowed; }

/* Decision trail (FE-11). Collapsed by default so a long queue stays
   scannable; the detail opens only when someone asks for it. */
tr.trail-row > td { padding-top:0 !important; border-top:0 !important; }
.decision-trail { margin:0 0 4px; }
.decision-trail > summary {
  cursor:pointer; list-style:none; display:flex; flex-wrap:wrap;
  gap:6px 12px; align-items:baseline; padding:5px 8px; border-radius:6px;
  font-size:12px; color:var(--muted); user-select:none;
}
.decision-trail > summary::-webkit-details-marker { display:none; }
.decision-trail > summary::before {
  content:"▸"; font-size:10px; line-height:1; transition:transform .12s ease;
  color:var(--muted); flex:0 0 auto;
}
.decision-trail[open] > summary::before { transform:rotate(90deg); }
.decision-trail > summary:hover { background:var(--surface-2, #f2f5f3); }
.decision-trail > summary:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
.decision-trail .trail-summary { color:var(--text, inherit); font-weight:600; }
.decision-trail .trail-count {
  border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:11px;
}
.decision-trail .trail-list {
  list-style:none; padding:10px 0 6px 20px; margin:0;
  border-left:1px solid var(--line); margin-left:10px;
}