/* Shared by every page: base typography, the header, buttons, the footer and motion. */
@import url("./tokens.css?v=10");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  background: var(--color-paper);
  color-scheme: light dark;
  font-family: var(--font-body);
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Pictures and links are never dragged out of the page as ghost images. */
img,
a {
  -webkit-user-drag: none;
}

img {
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 0.2em;
  transition:
    color var(--dur-micro) var(--ease-out),
    text-decoration-color var(--dur-micro) var(--ease-out);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-xl)));
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline:
    max(var(--page-gutter), env(safe-area-inset-left))
    max(var(--page-gutter), env(safe-area-inset-right));
}

/* Header ------------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}

/*
 * The app's glass bar: page colour washed over a blur of whatever scrolls beneath. It reaches
 * 10rem above the header because Safari 26 draws the page behind its own translucent toolbar;
 * without the extra height, content shows through between that toolbar and this header. Other
 * browsers never show the part above the viewport.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: -10rem 0 0;
  z-index: -1;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
}

.site-header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wordmark {
  flex: 0 1 auto;
  min-width: 0;
  padding-block: var(--space-xs);
  border-radius: var(--radius-xs);
}

.wordmark img {
  width: auto;
  height: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav-link {
  display: none;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.site-nav-link:hover {
  color: var(--color-ink);
}

@media (min-width: 40rem) {
  .site-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Buttons ------------------------------------------------------------------------------------ */

.pill-button,
.download-button {
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-text);
  text-decoration: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    scale var(--dur-micro) var(--ease-out);
}

.pill-button {
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.pill-button:hover,
.download-button[href]:hover {
  background: var(--color-primary-hover);
}

.pill-button:active,
.download-button[href]:active {
  scale: 0.98;
}

/* Side by side at equal widths when they fit; otherwise stacked at full width. */
.download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.download-buttons .download-button {
  flex: 1 1 14rem;
}

/*
 * A download button with no href is waiting for its public link: it is quiet stone, inert and
 * shows its coming-soon note. Add the href and remove aria-disabled, role and any aria-label when it is live.
 */
.download-button {
  min-height: 4rem;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.download-button-text {
  display: grid;
  gap: 0.0625rem;
  text-align: start;
}

.download-button-label {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
}

.download-button-detail {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.72;
}

.download-button-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  transition: translate var(--dur-short) var(--ease-out);
}

.download-button[href]:hover .download-button-icon {
  translate: 0 2px;
}

.download-button:not([href]) {
  background: var(--color-surface);
  color: var(--color-ink-2);
  cursor: default;
}

.download-button:not([href]) .live-note,
.download-button[href] .pending-note {
  display: none;
}

/* Footer ------------------------------------------------------------------------------------- */

.site-footer {
  padding-block:
    var(--space-2xl)
    max(var(--space-xl), env(safe-area-inset-bottom));
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.site-footer-inner {
  display: grid;
  gap: var(--space-xl);
}

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
}

.site-footer-tagline {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}

.footer-links a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--color-ink);
}

.footer-links a[aria-current="page"] {
  font-weight: 600;
}

.site-footer-meta {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.site-footer-meta p {
  margin: 0;
}

/* Motion ------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Content already on screen when the page opens rises in once, in the order of --delay. */
  .rise {
    animation: rise var(--dur-long) var(--ease-out) both;
    animation-delay: var(--delay, 0ms);
  }

  /* Further down the page, content rises into place as it scrolls into view. */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

/* The live TestFlight button leads with a large Apple logo rather than a trailing arrow. */
.download-button-logo {
  width: 1.875rem;
  height: 1.875rem;
}

.download-button[href] .download-button-logo {
  order: -1;
}

.download-button[href]:hover .download-button-logo {
  translate: none;
}

.download-button[href] {
  justify-content: flex-start;
  padding-inline-start: 1.375rem;
}