body {
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  padding: 2em;
}

/* Parameter control buttons */
#parameterControls button {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 80ms ease;
  margin-right: 0.5rem;
  font-weight: 700;
}

#parameterControls button:hover {
  transform: translateY(-1px);
}

#parameterControls button:active {
  transform: translateY(0);
}

#parameterControls button:focus {
  outline: none;
}

/* Show a strong focus ring for keyboard users only.
   Use :focus-visible where supported; use .user-is-tabbing fallback for older browsers. */
/* Two-tone focus ring: inner yellow (visible on dark buttons) + outer black (visible on light page background).
   The inner ring (first shadow) ensures contrast against dark UI components; the outer ring (second shadow)
   ensures contrast against light page background. */
#parameterControls button:focus-visible,
.user-is-tabbing #parameterControls button:focus,
.user-is-tabbing [role="region"][tabindex]:focus {
  box-shadow: 0 0 0 4px #ffd600, 0 0 0 8px #000000;
  border-color: #ffd600;
}

#parameterDetails {
  margin-top: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
  background-color: #f9f9f9;
  margin-bottom: 1em;;
}

#parameterDetails summary {
  font-weight: 600;
  cursor: pointer;
}

/* Ensure focus outlines are also visible when the dynamic appian elements receive focus */
[role="region"][tabindex]:focus-visible {
  box-shadow: 0 0 0 4px #ffd600, 0 0 0 8px #000000;
}

#parameterControls button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* High-contrast color variants for buttons */
#saveParamsBtn {
  background: #004b1a; /* dark green */
  color: #ffffff;
  border: 2px solid #ffffff;
}

#saveParamsBtn:hover {
  background: #006927;
}

#loadParamsBtn {
  background: #002b5c; /* dark blue */
  color: #ffffff;
  border: 2px solid #ffffff;
}

#loadParamsBtn:hover {
  background: #034b8c;
}

#clearSavedBtn {
  background: #5c0000; /* dark red */
  color: #ffffff;
  border: 2px solid #ffffff;
}

#clearSavedBtn:hover {
  background: #800000;
}

/* Status text should be visible on high-contrast backgrounds */
#parameterControls #paramsStatus {
  color: #ffffff;
  font-weight: 600;
}

#dynamicLoader {
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

#loadingMessage {
    padding: 1em;
    margin: 0;
}