/* HTTP Compare tool — side-by-side diff (TOOLS-BACKLOG #13.5) */

.cmp-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.cmp-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-label {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3, #252a39);
  color: var(--primary, #59a8ff);
  border-radius: var(--radius-sm, 8px);
  font-weight: 600;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}

.cmp-summary {
  margin-bottom: 14px;
}
.cmp-summary-title {
  font-size: var(--fs-xs, 12px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8494ae);
  margin-bottom: 8px;
}
.cmp-summary-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cmp-stat {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 100px);
  font-size: var(--fs-xs, 12px);
  font-variant-numeric: tabular-nums;
}
.cmp-stat--match    { background: rgba(61, 214, 140, 0.10); color: var(--success, #3dd68c); }
.cmp-stat--diff     { background: rgba(244, 114, 114, 0.12); color: var(--danger, #f47272); }
.cmp-stat--only-a   { background: rgba(89, 168, 255, 0.10); color: var(--primary, #59a8ff); }
.cmp-stat--only-b   { background: rgba(45, 212, 191, 0.10); color: var(--secondary, #2dd4bf); }

.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cmp-side {
  background: var(--surface, #14171f);
  border: 1px solid var(--border-2, #252a37);
  border-radius: var(--radius-base, 12px);
  overflow: hidden;
}
.cmp-side--a { border-top: 3px solid var(--primary, #59a8ff); }
.cmp-side--b { border-top: 3px solid var(--secondary, #2dd4bf); }

.cmp-side-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #1c1f29);
  background: var(--surface-2, #1b1f2b);
}
.cmp-side-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--surface-3, #252a39);
  color: var(--text-2, #c5ccdf);
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}
.cmp-side-url {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: var(--fs-sm, 13px);
  color: var(--text-2, #c5ccdf);
}

.cmp-side-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #1c1f29);
}
.cmp-meta-pill {
  padding: 3px 9px;
  background: var(--surface-3, #252a39);
  border-radius: var(--radius-pill, 100px);
  font-size: var(--fs-xs, 12px);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  color: var(--text-2, #c5ccdf);
  font-variant-numeric: tabular-nums;
}
.cmp-meta-pill--code-2xx { background: rgba(61, 214, 140, 0.18); color: var(--success, #3dd68c); }
.cmp-meta-pill--code-3xx { background: rgba(245, 200, 66, 0.20); color: var(--warning, #f5c842); }
.cmp-meta-pill--code-4xx,
.cmp-meta-pill--code-5xx { background: rgba(244, 114, 114, 0.18); color: var(--danger, #f47272); }
.cmp-meta-pill--redirect { background: rgba(89, 168, 255, 0.14); color: var(--primary, #59a8ff); }

.cmp-headers {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs, 12px);
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.cmp-headers td {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border, #1c1f29);
  word-break: break-all;
  vertical-align: top;
}
.cmp-row-key {
  color: var(--muted-2, #8e9bb5);
  width: 38%;
}
.cmp-row-val { color: var(--text-2, #c5ccdf); }

.cmp-row--match    .cmp-row-key,
.cmp-row--match    .cmp-row-val { color: var(--text-2, #c5ccdf); }
.cmp-row--diff     { background: rgba(244, 114, 114, 0.07); }
.cmp-row--diff     .cmp-row-key { color: var(--danger, #f47272); }
.cmp-row--only-mine { background: rgba(89, 168, 255, 0.05); }
.cmp-row--only-mine .cmp-row-key { color: var(--primary, #59a8ff); }
.cmp-row--missing  .cmp-row-val { color: var(--muted, #8494ae); font-style: italic; }

.cmp-side-error {
  padding: 14px;
  color: var(--danger, #f47272);
  font-size: var(--fs-sm, 13px);
}

@media (max-width: 720px) {
  .cmp-grid { grid-template-columns: 1fr; }
}