/* 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: 860px;
}

.home-link {
  color: inherit;
  text-decoration: none;
}

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

/* Partner 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;
}

/* TUD's colour file keeps its protection zone as padding (146 of 765 units
   on every side), the white one is cropped to the artwork. Drawn 1.39x taller
   with the padding pulled back by negative margins, its mark matches the
   white one's size and takes up the same space. */
.org-logo-light[alt="TU Dresden"] {
  height: 3.81rem;
  margin: -0.73rem;
}

.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;
}

/* Commands the web form doesn't offer, listed for completeness. */
.cli-only {
  color: var(--bs-secondary-color);
}

/* In the command list they must read as unavailable (they can't be truly
   disabled: a disabled option fires no event to link it to the About page).
   A plain colour, not the GrayText system colour: Firefox draws the open
   list itself and doesn't carry system colours over into it. */
option.cli-only {
  color: grey;
}

/* A heading that opens the page has nothing above it to separate from. */
.docs > h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.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);
}