/* Filter bar and the compliance callout rows. */
/* ---------- filter bar ---------- */
.search-field{ display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--text-primary); padding:6px 2px; min-width:200px; flex:1 1 220px; max-width:320px; }
.search-field svg{ width:18px; height:18px; color:var(--text-primary); flex:none; }
.search-field input{ border:0; outline:0; background:transparent; font-family:var(--sans); font-weight:300; font-size:15px; color:var(--text-primary); width:100%; }
.search-field input::placeholder{ color:var(--text-secondary); }
.sel{ height:38px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:14px; padding:0 30px 0 12px; appearance:none;
  background-image:var(--select-caret);
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px; }
.chip{ font-family:var(--sans); font-weight:300; font-size:13.5px; color:var(--text-primary); border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px; line-height:1; cursor:pointer; background:var(--surface); transition:background-color .2s, color .2s, border-color .2s; white-space:nowrap; }
.chip.on{ background:var(--blue-01); color:var(--on-brand); border-color:var(--blue-01); }
.chip.risk.on{ background:var(--critical); border-color:var(--critical); color:var(--text-inverse); }
.chip-reset{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); background:none; border:none; cursor:pointer; padding:6px 4px; text-decoration:underline; text-underline-offset:3px; }
.filter-count{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); margin-left:auto; white-space:nowrap; }

/* ---------- compliance callout ---------- */
.callout{ border:1px solid var(--critical); border-left-width:4px; border-radius:var(--radius-sm); background:var(--critical-wash); padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
.callout .head{ display:flex; align-items:center; gap:10px; }
.callout .head svg{ width:20px; height:20px; color:var(--critical); flex:none; }
.callout .head strong{ font-weight:700; font-size:16px; color:var(--text-primary); }
.callout p{ font-size:13.5px; color:var(--text-primary); line-height:1.5; }
.callout .risklist{ display:flex; flex-direction:column; gap:0; margin-top:6px; border-top:1px solid var(--border-strong); }
.risk-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-strong); font-size:12.5px; cursor:pointer; }
.risk-row:hover{ background:var(--row-hover); }
.risk-row .rid{ font-family:var(--mono); color:var(--text-secondary); width:78px; flex:none; }
/* min-width:0 is required for a flex:1 item to ever shrink below its own
   content's natural width - without it the ellipsis two rules down never
   gets the chance to run, which is how this held 114px of text in what
   measured out as a 7px box at 320px. */
.risk-row .rco{ flex:1; min-width:0; font-weight:400; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.risk-row .rmeta{ font-family:var(--mono); color:var(--text-secondary); flex:none; }
.risk-more{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); padding-top:8px; font-variant-numeric:tabular-nums; }
.good-line{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); margin-top:14px; }
.good-line .dot{ width:8px; height:8px; border-radius:50%; background:var(--good-dot); flex:none; }