.curl-converter-page {
  --curl-select-min-width: 180px;
  --curl-language-select-min-width: 230px;
  --curl-warning-border: #d5dee8;
  --curl-warning-background: #f8fafc;
  --curl-warning-margin-block: 0 18px;
  --curl-warning-margin-inline: 18px;
  --curl-warning-padding-block: 14px;
  --curl-warning-padding-inline: 16px;
  --curl-warning-radius: 8px;
  --curl-warning-title-size: 15px;
  --curl-warning-list-indent: 22px;
  --curl-warning-item-gap: 5px;
}

/* Editor controls */
:where(.curl-converter-page) .curl-converter-editor-panel {
  overflow: hidden;
}

:where(.curl-converter-page) .json-format-select {
  min-inline-size: var(--curl-select-min-width);
}

:where(.curl-converter-page) .curl-converter-language-select {
  min-inline-size: var(--curl-language-select-min-width);
}

/* Conversion summary */
:where(.curl-converter-page) .curl-converter-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

:where(.curl-converter-page) .curl-converter-stat--wide {
  grid-column: span 2;
}

:where(.curl-converter-page) .curl-converter-stat--wide dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conversion warnings */
:where(.curl-converter-page) .curl-converter-warnings {
  margin-block: var(--curl-warning-margin-block);
  margin-inline: var(--curl-warning-margin-inline);
  padding-block: var(--curl-warning-padding-block);
  padding-inline: var(--curl-warning-padding-inline);
  border: 1px solid var(--curl-warning-border);
  border-radius: var(--curl-warning-radius);
  background: var(--curl-warning-background);
}

:where(.curl-converter-page) .curl-converter-warnings h3 {
  margin-block: 0 8px;
  margin-inline: 0;
  font-size: var(--curl-warning-title-size);
}

:where(.curl-converter-page) .curl-converter-warnings ul {
  margin-block: 0;
  margin-inline: 0;
  padding-inline-start: var(--curl-warning-list-indent);
}

:where(.curl-converter-page) .curl-converter-warnings li + li {
  margin-block-start: var(--curl-warning-item-gap);
}

/* Inline examples */
:where(.curl-converter-page) code {
  font-family: "Cascadia Code", Consolas, monospace;
}

/* Responsive layout */
@media (max-width: 960px) {
  :where(.curl-converter-page) .curl-converter-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(.curl-converter-page) .curl-converter-stat--wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  :where(.curl-converter-page) .json-format-select {
    min-inline-size: 0;
    inline-size: 100%;
  }

  :where(.curl-converter-page) .curl-converter-stats {
    grid-template-columns: 1fr;
  }

  :where(.curl-converter-page) .curl-converter-stat--wide {
    grid-column: auto;
  }
}