/*
 * All CSS in this file is scoped to the #home-container ID.
 */

#home-container {
  flex-grow: 1;
  display: flex;
}

#home-container #home-right {
  /* The left margin prevents this content from appearing under the aside. */
  margin-left: calc(var(--analyze-form-aside-width));
  padding-top: calc(var(--page-header-height) + 16px);
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

#home-container #analysis-loading-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 96px;

  /* This is an overlay that fills the full content window. So when the analysis is running, nothing else is shown. */
  position: absolute;
  inset: 0;
  background-color: var(--color-neutral-100);
  z-index: 100;
}

#home-container #analysis-loading-message > p {
  font-size: var(--font-sz-xl);
  font-weight: var(--font-wt-bold);
}

#home-container .page-title {
  font-size: var(--font-sz-2xl);
  font-weight: var(--font-wt-bold);
  color: var(--color-text-high);
}

#home-container .section-title {
  margin-bottom: 16px;
  font-size: var(--font-sz-xl);
  font-weight: var(--font-wt-bold);
  color: var(--color-text-high);
}

#home-container #analysis-results {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#home-container #analysis-results-error-message {
  font-size: 20px;
  font-weight: var(--font-wt-bold);
  color: red;
}