/* Shield judgements share the Hallucination field layout and the Hazard score rows. */
.shield-mode #input {
  min-height: 82px;
  max-height: 170px;
  font-size: 13px;
}
.shield-fields label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e2e7dc;
  padding: 12px 16px 0;
  color: #61725a;
  font: 8px var(--mono);
  letter-spacing: 1px;
}
.shield-fields label span { font: 8px var(--sans); letter-spacing: 0; color: #8a9386; }
.shield-mode .shield-fields textarea {
  display: block;
  min-height: 96px;
  max-height: 240px;
  width: 100%;
  padding: 10px 16px 14px;
  font-size: 12px;
  line-height: 1.8;
  resize: vertical;
}
.shield-mode #shield-labels { font: 11px/1.8 var(--mono); }
.shield-mode .editor-foot { align-items: flex-start; gap: 12px; line-height: 1.65; }
.shield-mode #char-count { white-space: nowrap; }
.shield-section + .shield-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e1e6d9;
}
.shield-section > .flow-empty-label { display: block; }
.shield-mode .shield-section .result-title { font-size: 23px; }
.shield-clear {
  font: 6px var(--mono);
  border: 1px solid #c4d2b7;
  color: #6f895b;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 7px;
  vertical-align: middle;
}
.shield-categories { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.shield-subhead { font: 8px var(--mono); letter-spacing: .6px; color: #7d936d; text-transform: uppercase; }
.shield-category {
  border: 1px solid #dae3cf;
  border-radius: 5px;
  background: #f9faf2;
  padding: 8px 11px;
  font-size: 12px;
}
.shield-category .score-label { margin-bottom: 3px; }
.shield-description { font-size: 10px; line-height: 1.55; color: #8a9c7a; margin: 2px 0 6px; overflow-wrap: anywhere; }
.shield-categories .flow-more { margin-top: 0; }
.shield-categories .flow-more > .shield-category { margin-top: 7px; }
.shield-note { margin: 11px 0 0; font-size: 10px; line-height: 1.75; color: #66735d; }
.shield-custom .rank-item .shield-description { margin-bottom: 0; }
@media (max-width: 700px) {
  .shield-mode #input { min-height: 90px; font-size: 14px; }
  .shield-mode .shield-fields textarea { font-size: 14px; min-height: 105px; }
  .shield-mode #shield-labels { font-size: 12px; }
  .shield-mode .editor-foot { flex-direction: column; gap: 3px; }
}
.flow-mode .shield-custom .rank-item[data-flow-winner=true] { background: #edf3e3; border-color: #a6bd90; }