/*
 * The landing page (overrides/home.html), laid out like the app's splash
 * screen (Splash.css): a centred column with the wordmark near the top, the
 * ways in beneath it, and the rule and licence text held at the bottom.
 *
 * The splash is a fixed 573x883 window. Here the column fills the space
 * between header and footer instead, and the splash's pixel positions become
 * proportions of it.
 */

/* Stretch the main area so the rule and licence can sit at its foot. */
.md-main:has(.bs-home) {
  display: flex;
  flex-direction: column;
}

.md-main:has(.bs-home) .md-main__inner {
  flex: 1;
  margin-top: 0;
}

.md-content.bs-home {
  display: flex;
  max-width: none;
}

.bs-home__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
}

/* 349x160 in the splash, 106px below its title bar. */
.bs-home .bs-logo {
  width: 349px;
  max-width: 80%;
  margin-top: clamp(48px, 12vh, 128px);
}

.bs-home__lede {
  max-width: 34rem;
  margin: 40px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Where the splash has Start and Data settings, 8px apart. The bottom
   margin keeps the rule clear of them when the window is short. */
.bs-home__ways {
  margin: 40px 0 64px;
}

.bs-home__ways p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
}

.bs-home__ways .bs-home__install {
  margin-top: 20px;
}

.bs-home__install code {
  padding: 4px 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 336px in the splash, pushed to the bottom of the column. */
.bs-home__rule {
  width: 336px;
  max-width: 80%;
  height: 0.5px;
  margin-top: auto;
  background: var(--chrome-border);
}

/*
 * The splash sets this at 9px in a 388px column, which suits a window read
 * for a moment. On a page it gets the caption size and a wider column.
 */
.bs-home__licence {
  max-width: 30rem;
  margin: 19px 0 40px;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-muted);
  text-align: justify;
  hyphens: auto;
}

/* Justified text in a narrow column opens wide gaps between words. */
@media screen and (max-width: 44.9375em) {
  .bs-home__licence {
    text-align: left;
  }
}