/**
 * Style dla widgetu changelogu wstrzykiwanego w miejsce znacznika
 * `<Changelog />` przez changelog.js.
 *
 * Selektory owinięte w :where() celowo mają zerową specyficzność klasy —
 * ten arkusz jest osadzany w cudzej stronie dokumentacji (ReDoc), więc
 * style hosta powinny móc łatwo nadpisać dowolną regułę bez !important.
 */

:where(.redoc-changelog) {
  /* Tokeny motywu — nadpisz je punktowo, jeśli integrujesz widget z własnym designem.
     Celowo brak tu font-family: krój pisma ma dawać strona nadrzędna
     (motyw ReDoc / arkusz strony hosta), żeby changelog wyglądał spójnie
     z resztą dokumentacji zamiast narzucać własny system-font stack. */
  --rc-border-color: #e5e7eb;
  --rc-thead-bg: #f3f4f6;
  --rc-table-header-weight: 600;
  --rc-loading-color: #475569;
  --rc-loading-bg: #f8fafc;
  --rc-error-color: #b91c1c;
  --rc-error-bg: #fef2f2;
  --rc-radius: 6px;

  width: 100%;
}

/* Izolacja modelu pudełkowego — widget bywa osadzany na stronach, które nie
   resetują box-sizing globalnie, a padding w media query poniżej zakłada border-box. */
:where(.redoc-changelog),
:where(.redoc-changelog) *,
:where(.redoc-changelog) *::before,
:where(.redoc-changelog) *::after {
  box-sizing: border-box;
}

:where(.redoc-changelog) > :first-child {
  margin-top: 0;
}

:where(.redoc-changelog) > :last-child {
  margin-bottom: 0;
}

/* Bez margin/padding: strona nadrzędna narzuca je przez
   `redoc[spec-url] h1 { margin-*, padding-*: 5px !important }`,
   więc jakakolwiek wartość ustawiona tutaj i tak zostanie nadpisana.
   Kolor i font-weight nagłówka też pochodzą stamtąd. */
:where(.redoc-changelog) h1 {
  font-size: 30px;
  border-bottom: 2px solid var(--rc-border-color);
}

:where(.redoc-changelog) h2 {
  font-size: 23px;
  border-bottom: 1px solid var(--rc-border-color);
}

:where(.redoc-changelog) h3 {
  margin: 24px 0 10px;
  font-size: 19px;
}

:where(.redoc-changelog) h4 {
  margin: 20px 0 8px;
  font-size: 16px;
}

:where(.redoc-changelog) p {
  margin: 10px 0;
}

:where(.redoc-changelog) ul,
:where(.redoc-changelog) ol {
  margin: 10px 0;
  padding-left: 26px;
}

:where(.redoc-changelog) li {
  margin: 5px 0;
}

:where(.redoc-changelog) a:hover {
  text-decoration: underline;
}

:where(.redoc-changelog) a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

:where(.redoc-changelog) blockquote p {
  margin: 0;
}

:where(.redoc-changelog) table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
}

:where(.redoc-changelog) th,
:where(.redoc-changelog) td {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--rc-border-color);
}

:where(.redoc-changelog) th {
  background: var(--rc-thead-bg);
  font-weight: var(--rc-table-header-weight);
}

:where(.redoc-changelog) hr {
  margin: 28px 0;
}

:where(.redoc-changelog) img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rc-radius);
}

:where(.redoc-changelog) .changelog-loading,
:where(.redoc-changelog) .changelog-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--rc-radius);
}

:where(.redoc-changelog) .changelog-loading {
  color: var(--rc-loading-color);
  background: var(--rc-loading-bg);
}

:where(.redoc-changelog) .changelog-error {
  color: var(--rc-error-color);
  background: var(--rc-error-bg);
}

@media (max-width: 700px) {
  :where(.redoc-changelog) {
    padding: 20px;
  }
}