.browser-compat-panel {
  display: none;
  width: min(92vw, 620px);
  max-height: 88vh;
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 32px);
  color: var(--text, #17324b);
  text-align: left;
}

.browser-compat-static {
  max-width: 560px;
  color: var(--text, #17324b);
  line-height: 1.5;
  text-align: left;
}

.browser-compat-static [lang],
.browser-support-reference [lang] {
  display: none;
}

html[lang^='de'] .browser-compat-static [lang='de'],
html:not([lang^='de']) .browser-compat-static [lang='en'],
html[lang^='de'] .browser-support-reference [lang='de'],
html:not([lang^='de']) .browser-support-reference [lang='en'] {
  display: block;
}

.browser-compat-static h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.browser-compat-static p {
  margin: 8px 0 0;
}

.browser-compat-static-noscript {
  max-width: 560px;
  margin: 8px 0 0;
  color: var(--text, #17324b);
  line-height: 1.5;
  text-align: left;
}

html[data-gwf2-browser-compat='supported'] .browser-compat-static,
html[data-gwf2-browser-compat='supported'] .browser-compat-static-noscript {
  display: none !important;
}

html:not([data-gwf2-browser-compat='supported']) .page-loading-spinner,
html:not([data-gwf2-browser-compat='supported']) #page-loading-text,
html[data-gwf2-app-startup='failed'] .page-loading-spinner,
html[data-gwf2-app-startup='failed'] #page-loading-text {
  display: none !important;
}

.browser-compat-panel[hidden] {
  display: none !important;
}

.browser-compat-panel h1,
.browser-compat-panel h2 {
  margin: 0 0 12px;
  color: var(--text, #17324b);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
}

.browser-compat-panel p {
  margin: 0 0 12px;
  line-height: 1.55;
}

.browser-compat-panel ul {
  margin: 0 0 14px;
  padding-inline-start: 1.35rem;
}

.browser-compat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.browser-compat-panel button,
.browser-compat-panel a,
.browser-support-diagnostics button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border, #a9c8dd);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #17324b);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.browser-compat-panel button:focus-visible,
.browser-compat-panel a:focus-visible,
.browser-support-diagnostics button:focus-visible,
.browser-support-reference summary:focus-visible {
  outline: 3px solid var(--accent, #18718b);
  outline-offset: 3px;
}

.browser-compat-panel textarea,
.browser-support-diagnostics textarea {
  display: block;
  width: 100%;
  min-height: 126px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border, #a9c8dd);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #17324b);
  font: 0.85rem/1.4 monospace;
}

.browser-compat-copy-status {
  min-height: 1.4em;
  margin-top: 8px !important;
  font-size: 0.9rem;
}

.browser-support-diagnostics {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #a9c8dd);
}

.browser-support-diagnostics > p {
  margin: 0 0 10px;
}

html[data-gwf2-browser-compat='unsupported'] .page-loading-card,
html[data-gwf2-app-startup='failed'] .page-loading-card {
  width: fit-content;
  max-width: calc(100vw - 24px);
  justify-items: stretch;
}

html[data-gwf2-browser-compat='unsupported'] .page-loading-spinner,
html[data-gwf2-app-startup='failed'] .page-loading-spinner,
html[data-gwf2-browser-compat='unsupported'] #page-loading-text,
html[data-gwf2-app-startup='failed'] #page-loading-text {
  display: none !important;
}

html[data-gwf2-browser-compat='unsupported'] .page-loading-overlay,
html[data-gwf2-app-startup='failed'] .page-loading-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html[data-gwf2-browser-compat='unsupported'] .browser-compat-panel,
html[data-gwf2-app-startup='failed'] .browser-compat-panel {
  display: block;
}

html[data-gwf2-browser-compat='unsupported'][data-gwf2-compat-panel-ready='true']
  .browser-compat-static,
html[data-gwf2-app-startup='failed'][data-gwf2-compat-panel-ready='true']
  .browser-compat-static {
  display: none !important;
}

html[data-gwf2-browser-compat='unsupported'] .page,
html[data-gwf2-app-startup='failed'] .page {
  visibility: hidden !important;
}

html:not([data-gwf2-browser-compat='supported']) body.support-page .page {
  display: none !important;
}

html[data-gwf2-app-startup='failed'] body.support-page .page {
  display: none !important;
}

.browser-support-reference {
  max-width: 1100px;
  box-sizing: border-box;
  margin: 16px auto;
  padding: 0 18px;
  color: var(--text, #17324b);
}

.browser-support-reference summary {
  padding: 14px 16px;
  border: 1px solid var(--border, #a9c8dd);
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-weight: 700;
}

.browser-support-reference[open] > div {
  margin-top: 12px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--border, #a9c8dd);
  border-radius: 12px;
  background: var(--surface, #fff);
  line-height: 1.55;
}

.browser-support-reference h1,
.browser-support-reference h2,
.browser-support-reference h3 {
  color: var(--text, #17324b);
}

.browser-support-reference [lang='de'],
.browser-support-reference [lang='en'] {
  display: block;
}

.browser-support-reference > div > div[lang='de'] + div[lang='en'] {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #a9c8dd);
}

body.support-page .browser-support-reference {
  margin-top: 18px;
}

html:not([data-gwf2-browser-compat-actions='ready'])
  .browser-support-diagnostics
  button {
  display: none;
}

@media (max-width: 600px) {
  .browser-compat-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .browser-compat-actions > * {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .browser-support-reference {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner {
    animation: none;
  }
}