/* A2A Agent Validator — tool-specific styles layered on tool-shell.css */

code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--green-tint);
  color: var(--green-700);
  padding: 1px 6px;
  border-radius: 6px;
}

.sub-h { margin: 6px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

.action-row { gap: 10px; }
.action-row .btn { flex: 1 1 auto; }

.hint { font-weight: 600; color: var(--faint); font-size: 12px; }

/* auth panes */
.auth-pane { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); }
.masked { position: relative; display: flex; gap: 8px; align-items: stretch; }
.masked input { flex: 1; }
.reveal-btn { flex: 0 0 auto; min-height: 0; }
.reveal-btn.on { background: var(--green-soft); border-color: #cfe9d8; color: var(--green-700); }

/* custom headers list */
.hdr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hdr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.hdr-row .btn { min-height: 38px; }
@media (max-width: 640px) { .hdr-row { grid-template-columns: 1fr 1fr; } .hdr-row .hdr-del { grid-column: 2; justify-self: end; } }

.resolved {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.resolved__label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.resolved code { word-break: break-all; }

.examples { display: flex; align-items: center; gap: 10px; }
.examples__label { font-size: 12px; font-weight: 700; color: var(--faint); }
.chip-btn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.chip-btn:hover { border-color: var(--green); color: var(--green-700); background: var(--green-tint); }

/* verdict metrics */
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric {
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.metric__label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.metric__value { font-size: 18px; font-weight: 800; color: var(--ink); font-family: var(--mono); }
@media (max-width: 640px) { .metric-strip { grid-template-columns: repeat(2, 1fr); } }

/* message list (errors / warnings / ok) */
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-list .placeholder { color: var(--muted); font-size: 14px; margin: 0; }
.msg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  font-size: 14px; line-height: 1.45;
}
.msg small { color: var(--faint); }
.msg-ico { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 12px; }
.msg-ok    { border-color: #cfe9d8; }
.msg-ok    .msg-ico { background: var(--green-soft); color: var(--green-700); }
.msg-error { border-color: #ffd0cc; }
.msg-error .msg-ico { background: #fff2f1; color: var(--red); }
.msg-warn  { border-color: #f7e3ab; }
.msg-warn  .msg-ico { background: #fff8e5; color: var(--amber); }

/* shared checklist rows */
.diag-list { display: flex; flex-direction: column; gap: 8px; }
.diag-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.diag-dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 13px; background: #eceee8; color: var(--faint); }
.diag-label { font-weight: 700; color: var(--ink); }
.diag-detail { font-size: 13px; color: var(--muted); text-align: right; }
.diag-ok   .diag-dot { background: var(--green-soft); color: var(--green-700); } .diag-ok   { border-color: #cfe9d8; }
.diag-fail .diag-dot { background: #fff2f1; color: var(--red); }                 .diag-fail { border-color: #ffd0cc; }
.diag-warn .diag-dot { background: #fff8e5; color: var(--amber); }               .diag-warn { border-color: #f7e3ab; }
@media (max-width: 640px) { .diag-row { grid-template-columns: 26px 1fr; } .diag-detail { grid-column: 2; text-align: left; } }

/* skills preview */
.skills-preview { display: flex; flex-direction: column; gap: 8px; }
.skills-head { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.skill-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; background: var(--surface-2);
}
.skill-chip strong { color: var(--ink); font-size: 14px; }
.skill-chip span { color: var(--muted); font-size: 13px; }

/* troubleshooting tips */
.tip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; background: var(--surface-2);
}
.tip strong { color: var(--ink); font-size: 14px; }
.tip span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }