/* openExpress's website: the look of GNOME's app pages, the colours of openExpress's icon (its
   orange strap and its slate case), the system's own font. Nothing of Garmin's look. */

:root {
  color-scheme: light dark;
  --bg: #fafafb;
  --fg: #2e2e33;
  --dim: #5c5c63;
  --card: #ffffff;
  --border: rgb(0 0 6 / 10%);
  --link: #1a62bd;
  --focus: #1a62bd;
  /* The header: a light, warm background, lit from behind the icon. */
  --hero-bg: #fbeee6;
  --hero-glow: radial-gradient(ellipse 560px 380px at 50% 120px,
    rgb(255 150 91 / 45%), rgb(255 150 91 / 15%) 55%, rgb(255 150 91 / 0%) 80%);
  --hero-fg: #2b2f36;
  --hero-dim: #4c515b;
  --install-bg: #2b2f36;
  --install-fg: #fff3eb;
  --command-bg: rgb(255 255 255 / 70%);
  --command-border: rgb(43 47 54 / 18%);
  --unofficial-bg: rgb(43 47 54 / 7%);
  --shot-shadow: rgb(43 47 54 / 22%);
  /* Icons and small labels in the icon's orange. */
  --chip-bg: #ffd2bb;
  --chip-fg: #8a2f0c;
  --badge-bg: rgb(237 97 51 / 12%);
  --badge-fg: #6b2a10;
  --badge-border: rgb(237 97 51 / 25%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222226;
    --fg: #f5f5f7;
    --dim: #bdbdc4;
    --card: #2e2e33;
    --border: rgb(255 255 255 / 9%);
    --link: #8ab8f0;
    --focus: #ffa96b;
    /* Dark slate, with the orange light of the strap behind the icon. */
    --hero-bg: #1c1f24;
    --hero-glow: radial-gradient(ellipse 560px 400px at 50% 120px,
      rgb(255 150 91 / 28%), rgb(72 78 88 / 35%) 45%, rgb(72 78 88 / 0%) 80%);
    --hero-fg: #fff1e8;
    --hero-dim: #e6d3c8;
    --install-bg: #ff965b;
    --install-fg: #2b1205;
    --command-bg: rgb(0 0 0 / 30%);
    --command-border: rgb(255 241 232 / 16%);
    --unofficial-bg: rgb(255 241 232 / 8%);
    --shot-shadow: rgb(0 0 0 / 55%);
    --chip-bg: rgb(255 150 91 / 15%);
    --chip-fg: #ffa96b;
    --badge-bg: rgb(255 150 91 / 12%);
    --badge-fg: #f6dccd;
    --badge-border: rgb(255 150 91 / 20%);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Adwaita Sans", Inter, Cantarell, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--link); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

code, pre {
  font-family: "Adwaita Mono", "Source Code Pro", ui-monospace, monospace;
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* How far the first screenshot reaches up into the header. */
:root { --overlap: clamp(64px, 14vw, 160px); }

.hero {
  background: var(--hero-glow), var(--hero-bg);
  color: var(--hero-fg);
  text-align: center;
  padding: 56px 0 calc(var(--overlap) + 40px);
}

.app-icon {
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 4px 12px rgb(0 0 0 / 28%));
}

.hero h1 {
  margin: 12px 0 0;
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.summary {
  margin: 6px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.lead {
  max-width: 46rem;
  text-wrap: balance;
  margin: 10px auto 0;
  color: var(--hero-dim);
}

/* That openExpress is not Garmin's: said at once, under what it does. */
.unofficial {
  display: inline-block;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 4px 14px;
  border-radius: 9999px;
  background: var(--unofficial-bg);
  color: var(--hero-dim);
  font-size: 0.9rem;
  text-wrap: balance;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 28px;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
}

.install {
  background: var(--install-bg);
  color: var(--install-fg);
  font-size: 1.12rem;
  padding: 10px 40px;
}

.source {
  color: var(--hero-fg);
  border: 2px solid var(--command-border);
}

.install:hover, .source:hover { filter: brightness(1.12); }

.hint {
  margin: 22px 0 8px;
  font-size: 0.92rem;
  color: var(--hero-dim);
}

/* A command on one line: it scrolls sideways where it does not fit, and one click selects all
   of it, ready to copy. */
.command {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--command-bg);
  border: 1px solid var(--command-border);
  color: var(--hero-fg);
  text-align: left;
  font-size: 0.86rem;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--command-border) transparent;
  user-select: all;
}

/* The repository's three commands, folded under the one of the reference. */
.repository {
  margin: 14px auto 0;
  max-width: 100%;
}

.repository summary {
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--hero-dim);
}

.repository .command { margin-top: 10px; }

main > section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 20px 0;
}

h2 {
  margin: 0 0 18px;
  font-size: 1.55rem;
  font-weight: 800;
}

/* Screenshots: the window, light or dark as the page. */
main > .shots { padding-top: 0; }

.shot {
  margin: 0;
  text-align: center;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* The first one reaches up over the edge of the header. */
.main-shot {
  position: relative;
  margin-top: calc(-1 * var(--overlap));
}

.main-shot img { filter: drop-shadow(0 14px 30px var(--shot-shadow)); }

.shot-row img { filter: drop-shadow(0 8px 18px var(--shot-shadow)); }

figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--dim);
}

/* The row: each picture as wide as its shape asks, so that all three are as high (the narrow
   window smaller) and their captions on one line. */
.shot-row {
  display: flex;
  gap: 18px;
  margin-top: 26px;
}

.shot-row > .shot { flex: 1.351 1 0; min-width: 0; }   /* 1400 × 1036 */
.shot-row > .narrow-shot { flex: 0.4866 1 0; }          /* 600 × 1233 */

/* Connect IQ apps: the picture and the text side by side. */
.spotlight {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-areas: "image text";
  gap: 36px;
  align-items: center;
}

.spotlight-text { grid-area: text; }
.spotlight-text p { margin: 0; }

.spotlight-image { grid-area: image; }

.spotlight-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 10px 24px var(--shot-shadow));
}

/* Six features, two by two, all of the same height. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}

.card h3, .needs h3 {
  margin: 0 0 4px;
  font-size: 1.08rem;
}

.card p, .needs p { margin: 0; color: var(--dim); }

.chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.badges li {
  padding: 4px 14px;
  border-radius: 9999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-fg);
  font-size: 0.92rem;
  font-weight: 600;
}

.devices p { margin: 0; max-width: 46rem; }

/* Requirements: two items in one card, the details under it. */
.needs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
  margin: 0;
  padding: 20px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.needs li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.note {
  max-width: 46rem;
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--dim);
}

.points {
  margin: 0;
  padding-left: 1.2em;
}

.points li { margin: 2px 0; }

.press p {
  margin: 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  text-align: center;
}

footer {
  margin-top: 64px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.95rem;
}

footer p { margin: 0 0 12px; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

/* Phones: everything in one column. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 40px; }
  .app-icon { width: 104px; height: 104px; }
  .hero h1 { font-size: 2.2rem; }
  .summary { font-size: 1.18rem; }
  .shot-row { flex-direction: column; }
  .shot-row > .shot { flex: none; }
  .shot-row > .narrow-shot { width: 62%; margin: 0 auto; }
  main > section { padding-top: 40px; }
  .spotlight {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "image";
    gap: 18px;
  }
  .cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .needs { grid-template-columns: 1fr; }
}