/* devtoken.tools — AWS Security Group Reviewer (builds on style.css) */

#sg-input { font-family: var(--mono); font-size: 12px; min-height: 200px; }
.field-help code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.stmt-link { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 12px; }

/* Group cards reuse the Policy Auditor's card look */
.sg-list { display: flex; flex-direction: column; gap: 12px; }
.stmt-card {
  border: 1px solid var(--border2);
  border-left: 3px solid var(--border2);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--bg3);
  scroll-margin-top: 16px;
}
.stmt-card.stmt-danger { border-left-color: var(--danger); }
.stmt-card.stmt-warn   { border-left-color: var(--warn); }
.stmt-card.stmt-info   { border-left-color: var(--payload); }
.stmt-card.stmt-ok     { border-left-color: var(--ok); }
.stmt-card:target { outline: 1px solid var(--accent); }
.stmt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.stmt-name { font-family: var(--mono); font-size: 13px; color: var(--text); font-weight: 600; word-break: break-all; }
.stmt-sid { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.stmt-count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }
.sg-gdesc { font-size: 13px; color: var(--text-2); margin: 0 0 6px; }

.sg-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 0 6px;
}
.sg-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sg-rule {
  display: grid;
  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
  gap: 2px 14px;
  padding: 6px 10px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 12px;
}
.sg-rule.sg-danger { border-left-color: var(--danger); background: #1a0505; }
.sg-rule.sg-warn   { border-left-color: var(--warn); background: #1c1200; }
.sg-rule.sg-info   { border-left-color: var(--payload); }
.sg-ports { color: var(--text); }
.sg-source { color: var(--text); word-break: break-all; }
.sg-dir { color: var(--muted); }
.sg-desc { grid-column: 2; color: var(--muted); word-break: break-word; }
.sg-cidr-link { margin-left: 10px; white-space: nowrap; }

.how-panel { margin-top: 28px; }
.how-panel .output-field { font-size: 12px; }
.how-panel .field-help { margin-top: 12px; }

@media (max-width: 600px) {
  .sg-rule { grid-template-columns: minmax(0, 1fr); }
  .sg-desc { grid-column: 1; }
}