/* The free tools (routes/tools/**). */
[data-component="tool"] form,
[data-component="tool"] [data-slot="inputs"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin: 20px 0;
}

[data-component="tool"] label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cos-text-secondary);
  font-size: 0.8125rem;
}

[data-component="tool"] input,
[data-component="tool"] textarea {
  padding: 8px 10px;
  border: 1px solid var(--cos-border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: var(--cos-text-primary);
  font: inherit;
}

[data-component="tool"] textarea {
  width: 100%;
  min-height: 160px;
  font-family: var(--cos-font-mono, monospace);
  font-size: 0.8125rem;
}

[data-component="tool"] [data-slot="result"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

[data-component="tool"] [data-slot="result"] div {
  padding: 14px;
  border: 1px solid var(--cos-border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
}

[data-component="tool"] [data-slot="result"] strong {
  display: block;
  color: var(--cos-text-primary);
  font-size: 1.375rem;
}

[data-component="tool"] pre {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--cos-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  font-size: 0.75rem;
  white-space: pre-wrap;
}

[data-component="tool"] select {
  padding: 8px 10px;
  border: 1px solid var(--cos-border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: var(--cos-text-primary);
  font: inherit;
}

/* Two inputs side by side (SBOM diff). */
[data-component="tool"] [data-slot="pair"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

[data-component="tool"] fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--cos-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
}

[data-component="tool"] legend {
  padding: 0 6px;
  color: var(--cos-text-primary);
  font-weight: 600;
}

/* Results: the label carries the meaning; the colour only backs it up. */
[data-verdict="ok"] {
  color: var(--cos-success, #4ade80);
}
[data-verdict="conditions"] {
  color: var(--cos-warning, #facc15);
}
[data-verdict="review"] {
  color: #fb923c;
}
[data-verdict="incompatible"] {
  color: var(--cos-danger, #f87171);
}
[data-component="tool"] [data-slot="result"] [data-verdict] strong {
  color: inherit;
}

[data-component="tool"] [data-slot="verified"] {
  color: var(--cos-text-secondary);
}
[data-component="tool"] [data-slot="verified"][role="alert"] {
  color: #facc15;
}

[data-slot="rule-table"] td,
[data-slot="rule-table"] th {
  font-size: 0.75rem;
  white-space: nowrap;
}