/* Triage tab. Scoped under .tab-triage; the shell (cards, panels, pills, tables, tips) comes
   from app.css. Light theme only, 2px outlines on every card and control, nothing truncated. */

.tab-triage{display:flex;flex-direction:column;gap:10px;min-width:0}
.tab-triage .tri-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tab-triage .tri-title{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.tab-triage .tri-ref{font-size:12px;color:var(--ink2);background:var(--bg2);border:2px solid var(--border-strong);border-radius:5px;padding:1px 6px}
.tab-triage .tri-head-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* Intake: five short fields on one grid. 5 items read as 3 + 2 on a wide screen, so the grid
   is sized to the field widths and the last row is allowed to be short, with the actions row
   under it closing the card. */
.tab-triage .tri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 10px;margin-top:8px;min-width:0}
.tab-triage .tri-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.tab-triage .tri-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);font-weight:700;display:inline-flex;align-items:center;gap:2px}
.tab-triage .tri-field .in{height:34px;padding:0 8px}
.tab-triage .tri-field select.in{height:34px}
.tab-triage .tri-actions{margin-top:10px;align-items:center;gap:8px;flex-wrap:wrap}
.tab-triage .tri-src{font-size:11.5px;color:var(--ink3);min-width:0;overflow-wrap:break-word}

/* Result: enrichment left, checks and the pen right, equal columns, equal heights. */
.tab-triage .tri-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.tab-triage .tri-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.tab-triage .tri-verdict:empty{display:none}
.tab-triage .tri-links{gap:6px}

.tab-triage .tri-dest{min-width:0;overflow-wrap:break-word}
.tab-triage .tri-dlabel{font-size:11px;color:var(--ink2);margin-top:2px}
.tab-triage .tri-row-venue td{background:#fff5f5}
.tab-triage .tri-act-hot{font-weight:700;color:var(--crit)}
.tab-triage .tblwrap td{overflow-wrap:break-word;word-break:keep-all;vertical-align:top}
.tab-triage .tblwrap th{white-space:nowrap}
.tab-triage .tblwrap .mono{word-break:keep-all}

/* Checks: one row per check, a solid mark on the left in the state's ink. */
.tab-triage .tri-checks{display:flex;flex-direction:column}
.tab-triage .tri-check{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);min-width:0}
.tab-triage .tri-check:last-child{border-bottom:0}
.tab-triage .tri-mark{flex:0 0 22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 12px/1 var(--mono);color:#fff;margin-top:1px}
.tab-triage .tri-check-pass .tri-mark{background:var(--ok)}
.tab-triage .tri-check-flag .tri-mark{background:var(--high)}
.tab-triage .tri-check-gap .tri-mark{background:#64748b}
.tab-triage .tri-check-text{min-width:0}
.tab-triage .tri-check-name{font-weight:700;font-size:12.5px;color:var(--ink)}
.tab-triage .tri-check-why{font-size:12.5px;color:var(--ink2);overflow-wrap:break-word}
.tab-triage .tri-check-flag .tri-check-why{color:#7c2d12}

/* The pen: a segmented control with solid-fill pressed state. */
.tab-triage .tri-seg{display:flex;flex-wrap:wrap;gap:6px}
.tab-triage .tri-segbtn{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border:2px solid var(--border-strong);border-radius:6px;background:var(--panel);color:var(--ink);padding:6px 10px;display:inline-flex;align-items:center;gap:6px;min-height:34px}
.tab-triage .tri-segbtn:hover{border-color:var(--ink)}
.tab-triage .tri-segbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab-triage .tri-segbtn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.tab-triage .tri-sug{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:#1c1917;border-radius:4px;padding:1px 5px;font-weight:700}
.tab-triage .tri-segbtn.on .tri-sug{background:var(--accent);color:#1c1917}
.tab-triage .tri-seg-sm .tri-segbtn{padding:4px 10px;min-height:30px;font-family:var(--mono)}
.tab-triage .tri-prow{align-items:center;gap:8px}
.tab-triage textarea.tri-why{min-height:56px;resize:vertical;line-height:1.4}
.tab-triage pre.tri-draft{max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:break-word;font-size:11.5px;line-height:1.45;margin:0}
.tab-triage .tri-pen-actions{gap:6px;flex-wrap:wrap}

/* Queue table. The case cell is the subject column and carries the reference, the address and
   the chain and type on three lines, so nothing in it is cut. */
.tab-triage .tri-qsubj{min-width:0}
.tab-triage .tri-qref{font-weight:700;color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.tab-triage .tri-qaddr{font-size:11px;color:var(--ink2);overflow-wrap:break-word;word-break:break-word}
.tab-triage .tri-qmeta{font-size:11px;color:var(--ink3)}
.tab-triage .tri-qcall{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tab-triage .tri-qwhy{font-size:12px;overflow-wrap:break-word}
.tab-triage .tri-qact{gap:4px;flex-wrap:wrap}
.tab-triage tr.tri-done td{color:var(--ink3)}
.tab-triage tr.tri-done .tri-qref{color:var(--ink3)}

/* Wide queue table scrolls inside its wrapper on a phone; the case column stays pinned. */
.tab-triage .tri-queue .tblwrap table{min-width:720px}
.tab-triage .tri-queue .tblwrap td:first-child,.tab-triage .tri-queue .tblwrap th:first-child{position:sticky;left:0;background:var(--panel);z-index:1;box-shadow:2px 0 0 0 var(--line2)}
.tab-triage .tri-queue .tblwrap th:first-child{z-index:3;background:var(--bg2)}
.tab-triage .tri-queue .tblwrap tr.tri-done td:first-child{background:var(--panel)}

@media(max-width:900px){
  .tab-triage .tri-body{grid-template-columns:1fr}
}
@media(max-width:700px){
  .tab-triage .tri-grid{grid-template-columns:1fr 1fr}
  .tab-triage .tri-segbtn,.tab-triage .btn.sm{min-height:44px}
  .tab-triage .tri-seg-sm .tri-segbtn{min-height:44px}
  .tab-triage .tri-field .in,.tab-triage .tri-field select.in{height:44px;font-size:16px}
  .tab-triage textarea.tri-why,.tab-triage .tri-pen-actions .btn{font-size:16px}
  .tab-triage .disc .tblwrap a.srclink{display:inline-block;padding:13px 0}
}
@media(max-width:420px){
  .tab-triage .tri-grid{grid-template-columns:1fr 1fr}
  .tab-triage .tri-field:first-child,.tab-triage .tri-field:nth-child(4),.tab-triage .tri-field:nth-child(5){grid-column:1 / -1}
}