/* The mixsum.app website. Every colour, font, size and corner comes from tokens.css, which
   `make design` writes from design/tokens.json (the same file as design/tokens.css).
   Mirrors the app's BrandBackground, BrandMarks, Wordmark, glass cards and pill buttons, like
   design/preview/components/brand.html. SwiftUI's shadow radius is about half of CSS's blur,
   hence the "* 2". Only page layout (column width, breakpoints) is set here. */

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

html { min-height: 100%; background: var(--color-backdrop-bottom); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: linear-gradient(var(--color-backdrop-top), var(--color-backdrop-bottom)) fixed;
  color: var(--color-backdrop-ink);
  font: var(--text-brand-body);
  line-height: 1.5;
}

a { color: inherit; }

/* The big faint + and × in the corners. */
.mark { position: fixed; fill: var(--color-brand-mark); pointer-events: none; z-index: 0; }
.mark.plus { width: var(--size-brand-mark-plus); height: var(--size-brand-mark-plus);
  left: calc(var(--size-brand-mark-plus) * var(--effect-brand-mark-overhang) * -1);
  bottom: calc(var(--size-brand-mark-plus) * var(--effect-brand-mark-overhang) * -1); }
.mark.times { width: var(--size-brand-mark-times); height: var(--size-brand-mark-times); transform: rotate(45deg);
  right: calc(var(--size-brand-mark-times) * var(--effect-brand-mark-overhang) * -1);
  top: calc(var(--size-brand-mark-times) * var(--effect-brand-mark-overhang) * -1); }

.page {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--layout-screen-margin);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
}

/* Wordmark: the M logo followed by "ixsum". */
.wordmark { display: inline-flex; align-items: baseline; gap: var(--spacing-xxs); white-space: nowrap;
  margin: 0; text-decoration: none; color: var(--color-backdrop-ink);
  font: var(--text-brand-title); font-size: calc(var(--size-wordmark-large) * var(--text-wordmark-share)); }
.wordmark svg { overflow: visible; height: calc(var(--size-wordmark-large) * var(--effect-wordmark-logo)); }
.wordmark.small { font-size: calc(var(--size-wordmark-small) * var(--text-wordmark-share)); }
.wordmark.small svg { height: calc(var(--size-wordmark-small) * var(--effect-wordmark-logo)); }
.logo { filter: drop-shadow(0 var(--size-logo-shadow-drop) calc(var(--size-logo-shadow-radius) * 2) var(--color-logo-shadow)); }

.tagline { margin: var(--spacing-xs) 0 0; font: var(--text-brand-tagline); color: var(--color-backdrop-ink-soft); }
.lead { margin: 0; font: var(--text-brand-heading); }

h2 { margin: 0; font: var(--text-brand-section); text-transform: uppercase; color: var(--color-backdrop-ink-soft); }

/* Glass cards. */
.glass-card {
  background: linear-gradient(var(--color-glass-top), var(--color-glass-bottom));
  box-shadow: inset 0 var(--stroke-glass-edge) 0 var(--color-glass-highlight),
    inset 0 calc(var(--stroke-glass-edge) * -1) 0 var(--color-glass-lowlight),
    0 var(--size-glass-shadow-drop) calc(var(--size-glass-shadow-radius) * 2) var(--color-glass-shadow);
  color: var(--color-glass-ink);
  border-radius: var(--radius-card);
  padding: var(--spacing-l);
}
.glass-card h3 { margin: 0 0 var(--spacing-xxs); font: var(--text-brand-card-title); }
.glass-card p { margin: 0; font: var(--text-brand-card-detail); color: var(--color-glass-ink-soft); }
.glass-card p + p { margin-top: var(--spacing-s); }
.glass-card a { color: var(--color-brand-accent); font: var(--text-brand-link); }

.cards { display: flex; flex-direction: column; gap: var(--layout-section-gap); }

.puzzle { display: flex; align-items: center; gap: var(--spacing-m); }
.badge { width: var(--size-card-icon); height: var(--size-card-icon); flex: none; display: grid; place-items: center;
  border-radius: var(--radius-icon-badge); font: var(--text-brand-stat-value);
  background: linear-gradient(var(--color-badge-top), var(--color-badge-bottom));
  box-shadow: inset 0 var(--stroke-glass-edge) 0 var(--color-glass-highlight),
    inset 0 calc(var(--stroke-glass-edge) * -1) 0 var(--color-glass-lowlight); }
.decode { color: var(--color-brand-decode); }
.target { color: var(--color-brand-target); }
.cages { color: var(--color-brand-cages); }
.cross { color: var(--color-brand-cross); }

/* Pill buttons. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-s);
  min-height: var(--layout-min-key-height); padding: 0 var(--spacing-xl); border-radius: 999px;
  font: var(--text-brand-pill); text-decoration: none;
  background: linear-gradient(var(--color-pill-top), var(--color-pill-bottom)); color: var(--color-pill-ink);
  box-shadow: inset 0 var(--stroke-glass-edge) 0 var(--color-pill-highlight),
    inset 0 calc(var(--stroke-glass-edge) * -1) 0 var(--color-pill-lowlight),
    0 var(--size-key-shadow-drop) calc(var(--size-key-shadow-radius) * 2) var(--color-glass-shadow); }
.pill.quiet { background: linear-gradient(var(--color-badge-top), var(--color-badge-bottom)); color: var(--color-glass-ink);
  box-shadow: inset 0 var(--stroke-glass-edge) 0 var(--color-glass-highlight),
    inset 0 calc(var(--stroke-glass-edge) * -1) 0 var(--color-glass-lowlight); }

/* Screenshot placeholders, until `make ios-screenshots` images replace them. */
.shots { display: flex; gap: var(--layout-section-gap); overflow-x: auto; padding-bottom: var(--spacing-s);
  scroll-snap-type: x mandatory; }
.shot { flex: 0 0 calc((100% - 2 * var(--layout-section-gap)) / 3); min-width: 150px; aspect-ratio: 1320 / 2868;
  scroll-snap-align: start; border-radius: var(--radius-card); display: grid; place-items: center; text-align: center;
  padding: var(--spacing-l); font: var(--text-brand-card-detail); color: var(--color-glass-ink-soft);
  background: linear-gradient(var(--color-glass-top), var(--color-glass-bottom));
  box-shadow: inset 0 var(--stroke-glass-edge) 0 var(--color-glass-highlight),
    inset 0 calc(var(--stroke-glass-edge) * -1) 0 var(--color-glass-lowlight); }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Long text pages (support, privacy). */
.prose h3 { margin: var(--spacing-l) 0 var(--spacing-xs); font: var(--text-brand-card-title); color: var(--color-glass-ink); }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font: var(--text-brand-body); color: var(--color-glass-ink); }
.prose ul { margin: var(--spacing-s) 0 0; padding-left: var(--spacing-xl); }
.prose li + li { margin-top: var(--spacing-xs); }

header.site { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-m); flex-wrap: wrap; }
.back { font: var(--text-brand-link); color: var(--color-backdrop-ink); }

footer { display: flex; flex-wrap: wrap; gap: var(--spacing-s) var(--spacing-l); font: var(--text-brand-note);
  color: var(--color-backdrop-ink-soft); }
footer a { color: var(--color-backdrop-ink); font: var(--text-brand-link); }