/* The text pages, /about and /import (web/about.html, web/import.html), on top of site.css. */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 48rem; margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r); padding-block: clamp(24px, 5vw, 52px) 56px; }
.page h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); }
.page h2 { margin-top: 22px; }
.hero { display: grid; gap: 14px; }
.hero p { max-width: 40rem; font-size: 1.15rem; }

/* /about: the text, a little larger than running text. */
.about { display: grid; gap: 16px; font-size: clamp(1.08rem, 1.6vw, 1.2rem); }
.about p:first-child { font-size: 1.12em; }

/* /import: the files, the URL and the heights, one after the other, each under a stretch of F-road. */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ways .card::before { content: ""; display: block; height: 6px; border-radius: 3px; margin-bottom: 14px; background: var(--froad); }
.card { display: grid; gap: 10px; align-content: start; min-width: 0; }
/* Gaia GPS's area files (web/layouts/gaia.html). */
.areas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 4px 14px; }
.areas .muted { display: inline; }
h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
h3 small { font-size: .82rem; font-weight: 400; color: var(--muted); }
ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
li::marker { color: var(--hut); font-weight: 600; }
code { font: .86rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--terrain); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.url { display: flex; gap: 8px; align-items: stretch; }
.url code { flex: 1; display: block; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); background: var(--card); }
.button, button.copy { display: inline-block; justify-self: start; padding: 10px 16px; border: 0; border-radius: 6px; background: var(--road); color: #fff;
  font: 600 .92rem var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 -3px 0 var(--ochre); }
.button:hover, button.copy:hover { background: #2a1c10; color: #fff; }
button.copy:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }
.muted { display: block; font-size: .9rem; color: var(--muted); }
.tag { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.tag.later { color: var(--hut); border-color: currentColor; }
.note { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--hut); background: var(--card); border-radius: 0 6px 6px 0; font-size: .92rem; color: var(--muted); }
.page > footer { font-size: .95rem; }

/* /import/<app>/: one app step by step (web/layouts/<app>.html). Each step's text beside its
   screenshot, stacked on phones; the screenshots are phone-sized at most. */
.crumb { font-size: .92rem; color: var(--muted); }
.guide p { margin: .6em 0; }
.parts { counter-reset: none; padding-left: 26px; gap: 8px; }
.parts .muted { display: inline; }
.part { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.part h2 { display: flex; align-items: center; gap: 12px; margin-top: 0; }
.num { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--road); color: #fff; font-size: 1.05rem; box-shadow: inset 0 -3px 0 var(--ochre); }
.guide-steps { gap: 22px; padding-left: 0; list-style: none; counter-reset: step; }
.guide-steps > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 10px 22px; align-items: start;
  position: relative; padding-left: 36px; counter-increment: step; }
.guide-steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--hut); color: var(--hut); font-weight: 600; font-size: .9rem; }
.guide-steps > li > div { display: grid; gap: 8px; }
.guide-steps > li:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.shot a { display: block; cursor: zoom-in; }
dialog.lightbox { padding: 0; border: 0; background: none; max-width: 96vw; max-height: 96vh; cursor: zoom-out; }
dialog.lightbox::backdrop { background: rgb(0 0 0 / .8); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 8px; }
details.aside { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 10px 14px; margin: 1rem 0; font-size: .95rem; }
details.aside summary { cursor: pointer; font-weight: 600; }
details.aside[open] { display: grid; gap: 8px; }
.faq { margin: 0; display: grid; gap: 4px 0; }
.faq dt { font-weight: 600; margin-top: 8px; }
.faq dd { margin: 0; }
@media (max-width: 46rem) {
  .guide-steps > li { grid-template-columns: minmax(0, 1fr); }
  .shot { max-width: 17rem; }
}

/* /import: pick an app first; each card opens its guide, or the files for other apps. */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 14px; }
.pick { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: inherit; text-decoration: none; box-shadow: inset 0 4px 0 var(--froad); }
.pick:hover { border-color: var(--road); }
.pick:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }
.pick h3 { font-size: 1.15rem; }
.pick span { font-size: .95rem; color: var(--muted); }
.pick b { margin-top: 4px; font-size: .92rem; color: var(--road); }
#files { scroll-margin-top: 12px; }