/* Extends json-formatter.css; keep every tool-specific selector scoped to this page. */
.json-schema-validator-page {
  --json-editor-drag-accent: var(--json-focus);
  --json-schema-validator-result-gap: 16px;
  --json-schema-validator-diagnostic-gap: 10px;
  --json-schema-validator-diagnostic-padding: 14px;
  --json-schema-validator-badge-radius: 999px;
  --json-schema-validator-action-gap: 8px;
  --json-schema-validator-compact-control-height: 30px;
  --json-schema-validator-compact-control-padding: 4px 8px;
  --json-schema-validator-detail-font-size: 12px;
  --json-schema-validator-badge-padding: 2px 9px;
  --json-schema-validator-issue-gap: 6px;
  --json-schema-validator-issue-padding: 11px 12px;
  --json-schema-validator-issue-path-gap: 6px 12px;
  --json-schema-validator-warning-padding: 10px 12px;
  --json-schema-validator-border-width: 1px;
  --json-schema-validator-strong-weight: 700;
  --json-schema-validator-overflow-wrap: anywhere;
  --json-schema-validator-success-bg: #dcfce7;
  --json-schema-validator-success-border: #86efac;
  --json-schema-validator-error-bg: #fee2e2;
  --json-schema-validator-error-border: #fca5a5;
  --json-schema-validator-warning-bg: #fff8e5;
  --json-schema-validator-warning-border: #e4b341;
}

/* Native fieldset styles are reset so semantic grouping does not alter the existing flex layout. */
:where(.json-schema-validator-page) .json-schema-validator-fieldset {
  min-inline-size: 0;
  margin: 0;
  border: 0;
  border-block-end: var(--json-schema-validator-border-width) solid var(--json-border);
}

/* Editor actions */
:where(.json-schema-validator-page) .json-schema-validator-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--json-schema-validator-action-gap);
}

:where(.json-schema-validator-page) .json-schema-validator-editor-actions .json-schema-validator-file-button {
  min-height: var(--json-schema-validator-compact-control-height);
  padding: var(--json-schema-validator-compact-control-padding);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--json-schema-validator-detail-font-size);
}

/* Validation result heading and status */
:where(.json-schema-validator-page) .json-schema-validator-result-panel {
  margin-block-start: var(--json-schema-validator-result-gap);
}

:where(.json-schema-validator-page) .json-schema-validator-result-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--json-schema-validator-action-gap);
}

:where(.json-schema-validator-page) .json-schema-validator-result-heading p {
  flex-basis: 100%;
}

:where(.json-schema-validator-page) .json-schema-validator-badge {
  padding: var(--json-schema-validator-badge-padding);
  border: var(--json-schema-validator-border-width) solid var(--json-border-strong);
  border-radius: var(--json-schema-validator-badge-radius);
  color: var(--json-muted);
  background: var(--json-control);
  font-size: var(--json-schema-validator-detail-font-size);
  font-weight: var(--json-schema-validator-strong-weight);
}

:where(.json-schema-validator-page) .json-schema-validator-badge.is-valid {
  border-color: var(--json-schema-validator-success-border);
  color: var(--json-success);
  background: var(--json-schema-validator-success-bg);
}

:where(.json-schema-validator-page) .json-schema-validator-badge.is-invalid {
  border-color: var(--json-schema-validator-error-border);
  color: var(--json-error);
  background: var(--json-schema-validator-error-bg);
}

/* Error and warning diagnostics */
:where(.json-schema-validator-page) .json-schema-validator-diagnostics {
  padding: var(--json-schema-validator-diagnostic-padding);
  border-block-start: var(--json-schema-validator-border-width) solid var(--json-border);
}

:where(.json-schema-validator-page) .json-schema-validator-diagnostics h3 {
  margin-block: 0 var(--json-schema-validator-diagnostic-gap);
}

:where(.json-schema-validator-page) .json-schema-validator-empty {
  margin: 0;
  color: var(--json-success);
}

:where(.json-schema-validator-page) .json-schema-validator-list {
  display: grid;
  gap: var(--json-schema-validator-diagnostic-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.json-schema-validator-page) .json-schema-validator-list > li {
  min-width: 0;
}

:where(.json-schema-validator-page) .json-schema-validator-issue {
  display: grid;
  width: 100%;
  gap: var(--json-schema-validator-issue-gap);
  padding: var(--json-schema-validator-issue-padding);
  border: var(--json-schema-validator-border-width) solid var(--json-error-border);
  border-radius: var(--json-radius-small);
  color: var(--json-text);
  background: var(--json-error-background);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

:where(.json-schema-validator-page) .json-schema-validator-issue:hover,
:where(.json-schema-validator-page) .json-schema-validator-issue:focus-visible {
  border-color: var(--json-focus);
}

:where(.json-schema-validator-page) .json-schema-validator-issue-paths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--json-schema-validator-issue-path-gap);
  color: var(--json-muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: var(--json-schema-validator-detail-font-size);
  overflow-wrap: var(--json-schema-validator-overflow-wrap);
}

:where(.json-schema-validator-page) .json-schema-validator-issue strong {
  color: var(--json-error);
}

:where(.json-schema-validator-page) .json-schema-validator-issue-detail {
  color: var(--json-muted);
  font-size: var(--json-schema-validator-detail-font-size);
  overflow-wrap: var(--json-schema-validator-overflow-wrap);
}

:where(.json-schema-validator-page) .json-schema-validator-list--warnings > li {
  padding: var(--json-schema-validator-warning-padding);
  border: var(--json-schema-validator-border-width) solid var(--json-schema-validator-warning-border);
  border-radius: var(--json-radius-small);
  color: var(--json-warning);
  background: var(--json-schema-validator-warning-bg);
  overflow-wrap: var(--json-schema-validator-overflow-wrap);
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  :where(.json-schema-validator-page) .json-schema-validator-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  :where(.json-schema-validator-page) .json-schema-validator-options {
    align-items: stretch;
    flex-direction: column;
  }

  :where(.json-schema-validator-page) .json-schema-validator-options :is(.json-format-setting, .json-format-select) {
    width: 100%;
    min-width: 0;
  }

  :where(.json-schema-validator-page) .json-schema-validator-editor-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  :where(.json-schema-validator-page) .json-schema-validator-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}