/* Small overrides layered on top of Bootstrap. Bootstrap's own
   [data-bs-theme] variables handle light/dark; only echtool-specific
   touches live here. */

body {
  padding-bottom: 3rem;
}

.app-container {
  max-width: 640px;
}

.app-container.docs {
  max-width: 860px;
}

.logo-mark {
  width: 2rem;
  height: 2rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: -0.02em;
}

/* Affiliation logos. Each institution's mark exists in a dark and a light
   form, so the theme swaps which file is shown rather than filtering one of
   them - a recoloured logo is not the logo. */
.org-logo {
  display: block;
  width: auto;
  /* Sized per mark, not to one shared height: HAW's wordmark is nearly twice
     as wide as TUD's for the same height, so equal heights make it read as
     the louder of the two. These land them on the same optical weight. */
  height: 2.75rem;
}

.org-logo[alt="HAW Hamburg"] {
  height: 2.25rem;
}

.org-logo-dark,
[data-bs-theme="dark"] .org-logo-light {
  display: none;
}

[data-bs-theme="dark"] .org-logo-dark {
  display: block;
}

.org-logo-link {
  display: inline-block;
  transition: opacity 0.15s ease-in-out;
}

.org-logo-link:hover,
.org-logo-link:focus-visible {
  opacity: 0.7;
}

.nav-btn {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.nav-btn.nav-icon-btn {
  width: 2rem;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

.docs h2 {
  margin-top: 2rem;
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.5rem;
  font-size: 1.15rem;
}

.docs h2:first-of-type {
  margin-top: 1rem;
}

.docs h3 {
  font-size: 1rem;
}

code, pre, textarea#ech_config {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

#result {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
}

#result-section.status-ok { border-left: 4px solid var(--bs-success) !important; }
#result-section.status-warn { border-left: 4px solid var(--bs-warning) !important; }
#result-section.status-err { border-left: 4px solid var(--bs-danger) !important; }

.advanced-toggle {
  color: var(--bs-body-color);
}

.advanced-chevron {
  color: var(--bs-secondary-color);
  transition: transform 0.15s ease;
  font-size: 0.8rem;
}

.advanced-toggle[aria-expanded="true"] .advanced-chevron {
  transform: rotate(90deg);
}