/* Settle website, on the EZUI 4.26.0 Shell. Colours are EZUI tokens, and
   text uses EZUI sizes wherever one fits. The one size of the site's own
   is the app's name at the top of the home page, which is bigger than
   anything EZUI has. */

html, body { margin: 0; }
body {
  background: var(--ezui-page);
  color: var(--ezui-text-primary);
  font-family: var(--ezui-font);
  font-size: var(--ezui-type-m);
  line-height: var(--ezui-type-m-line);
}
ul { margin: 0; padding: 0; list-style: none; }

/* Nothing on the site can be selected, dragged or long-pressed for a menu:
   text, images, buttons and links alike. site.js turns off the right-click
   menu. Links and buttons still work as normal. */
html {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, a { -webkit-user-drag: none; user-drag: none; }

/* The home page has no heading of its own, so on a wide screen its empty
   heading row goes and the page scrolls all the way to the top, rather
   than under a blank band that stays put. The page still starts where it
   did, one band (the Shell's own height for that row) down. On a phone the
   row stays: the menu button floats over it. 900px is where the Shell
   turns its navigation into a drawer. */
@media (min-width: 901px) {
  .ezui-shell__head[data-empty] { display: none; }
  .ezui-shell__head[data-empty] + .ezui-shell__body,
  .ezui-shell__head[data-empty] + .ezui-scroll__holder > .ezui-shell__body {
    padding-top: calc(var(--ezui-shell-band) + var(--ezui-shell-safe-top));
  }
}

/* The copyright, in the navigation's foot band. */
.site-copy {
  padding-inline: 10px;
  font-size: var(--ezui-type-s);
  line-height: var(--ezui-type-s-line);
  color: var(--ezui-text-tertiary);
}

/* ---- Home: the top, like an App Store page ---- */
.app-head {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}
.app-head__icon {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.app-head__name {
  margin: 0;
  font-size: calc(var(--ezui-type-xxl) * 2.4);
  line-height: 1;
  font-weight: var(--ezui-type-semibold);
  text-box: trim-both cap alphabetic;
}
.app-head__tagline {
  margin: 12px 0 20px;
  font-size: var(--ezui-type-xxl);
  line-height: var(--ezui-type-xxl-line);
  color: var(--ezui-text-secondary);
}
.app-head__badge { display: inline-block; }
/* 42px: the height of an EZUI large button. Apple's file is 40px. */
.app-head__badge img { display: block; height: 42px; width: auto; }

/* ---- Home: screenshots in a row that slides sideways ----
   Built like the App Store's: a grid that flows sideways, scroll snapping
   so each slide lands in place, and no scroll bar.

   The row stops at the edges of the page's content, as the App Store's
   does, so it keeps the same margin as everything above and below it. */
.shots { padding-bottom: 56px; }
.shelf { position: relative; container-type: inline-size; }
.shelf__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
.shelf__list::-webkit-scrollbar { display: none; }
.shelf__list > li { scroll-snap-align: start; }
.shelf__list img { display: block; width: 100%; height: auto; }
/* On a phone the next one peeks in at the edge, as the App Store does
   there. Anything wider shows only whole screenshots, below. */
@container (min-width: 520px) {
  .shelf__list { gap: 20px; grid-auto-columns: calc((100% - 20px) / 2); }
}
/* On a wider screen only whole screenshots show, with nothing cut off at
   either end, stretched to fill the row exactly, which puts them close to
   278px (the App Store's own size) on a laptop. Two from 520px wide, three
   from 700px, then one more each time another fits at 240px. */
@container (min-width: 700px) {
  .shelf__list { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@container (min-width: 1020px) {
  .shelf__list { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}
@container (min-width: 1280px) {
  .shelf__list { grid-auto-columns: calc((100% - 4 * 20px) / 5); }
}
@container (min-width: 1540px) {
  .shelf__list { grid-auto-columns: calc((100% - 5 * 20px) / 6); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf__list { scroll-behavior: auto; }
}

/* The arrows: EZUI icon buttons over each end of the row, shown while the
   pointer is over it. A touch screen swipes instead, so they never show
   there. At either end the one with nowhere to go hides. */
.shelf__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  opacity: 0;
  transition: opacity .16s ease;
}
/* EZUI's grey button is see-through, which vanishes over a grey slide. The
   same grey laid over a panel underneath makes it look exactly as it does
   on a white page, and the panel shadow gives it an edge. */
.shelf__arrow.secondary {
  background: linear-gradient(var(--ezui-fill-normal), var(--ezui-fill-normal)), var(--ezui-panel);
  box-shadow: var(--ezui-panel-shadow);
}
@media (hover: hover) {
  .shelf__arrow.secondary:hover {
    background: linear-gradient(var(--ezui-fill-normal-hover), var(--ezui-fill-normal-hover)), var(--ezui-panel);
  }
}
.shelf__arrow--prev { left: 8px; }
.shelf__arrow--next { right: 8px; }
.shelf__arrow--prev .ezui-icon { rotate: 180deg; }
.shelf__arrow:disabled { visibility: hidden; }
@media (hover: hover) {
  .shelf:hover .shelf__arrow,
  .shelf:focus-within .shelf__arrow { opacity: 1; }
}
@media (hover: none) {
  .shelf__arrow { display: none; }
}

/* ---- Home: Built with Apple features ---- */
.features { container-type: inline-size; }
.features__title {
  margin: 0 0 20px;
  font-size: var(--ezui-type-xxl);
  line-height: var(--ezui-type-xxl-line);
  font-weight: var(--ezui-type-semibold);
}
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
  /* Each item its own height at the top of its row, so the titles in a
     row line up even when one line runs to two. */
  align-items: start;
}
@container (min-width: 520px) {
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
  .features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* One column: the list is only as wide as its longest line and sits in
   the middle of the page, its heading lined up with it. The text in it
   stays left aligned. */
@container (max-width: 519px) {
  .features__inner { width: fit-content; max-width: 100%; margin-inline: auto; }
  .features__title { text-align: center; }
}
/* The icon centres on the title and line together, as in the app. */
.feature { display: flex; gap: 14px; align-items: center; }
/* The app's own SF Symbols, painted in the EZUI accent through a mask. */
.feature__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--ezui-accent);
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}
.feature__title {
  margin: 0 0 2px;
  font-size: var(--ezui-type-l);
  line-height: var(--ezui-type-l-line);
  font-weight: var(--ezui-type-semibold);
}
.feature__line { margin: 0; color: var(--ezui-text-secondary); }

/* Narrow: still side by side, with a smaller icon, so the name, tagline
   and badge fit beside it on a phone. The icon's top lines up with the top
   of the name, as on the App Store. */
@media (max-width: 600px) {
  .app-head { gap: 16px; align-items: flex-start; }
  .app-head__icon { width: 88px; height: 88px; }
}

/* ---- Privacy Policy and Support ---- */
/* The text box sits in the middle of the page; the text in it does not. */
.page { max-width: 640px; margin-inline: auto; }
.page h2 {
  margin: 24px 0 4px;
  font-size: var(--ezui-type-l);
  line-height: var(--ezui-type-l-line);
  font-weight: var(--ezui-type-semibold);
}
.page p { margin: 0 0 12px; color: var(--ezui-text-secondary); }
.page .page__date { color: var(--ezui-text-tertiary); }
.page .page__lead { color: var(--ezui-text-primary); }