/* =========================================================================
   Content pages (marker pages, guides).
   Loaded after styles.css and reuses its tokens. The app shell sets
   `body { overflow:hidden }` for a fixed full-viewport map, which would trap
   these pages at one screen — .doc undoes exactly that and nothing else.
   ========================================================================= */

body.doc {
  display: block;
  overflow: visible;
  height: auto;
  background: var(--sand);
}

.masthead--doc {
  position: sticky;
  top: 0;
  flex-wrap: nowrap;
  gap: 1rem;
}
.masthead--doc .wordmark {
  text-decoration: none;
  color: inherit;
}

.topnav {
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topnav a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #BFD9D3;
  text-decoration: none;
  padding: .35rem .55rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.topnav a:hover { color: var(--shell); background: rgba(255, 255, 255, .10); }

.doc__main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.1rem clamp(.9rem, 4vw, 1.5rem) 2rem;
}

.crumbs {
  font-size: .76rem;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
}
.crumbs a { color: var(--gulf); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.doc__body {
  background: var(--shell);
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, 4vw, 2rem);
}

/* The marker number, treated the way the physical sign treats it. */
.doc__hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sand-deep);
  margin-bottom: 1.15rem;
}
.doc__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.9rem, 12vw, 4.1rem);
  font-variant-numeric: tabular-nums;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--gulf-deep);
  margin: 0;
}
.doc__sub {
  margin: .35rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.doc__body h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.2vw, 2rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--gulf-deep);
  margin: 0;
  text-wrap: balance;
}
.doc__body h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -.012em;
  color: var(--gulf-deep);
  margin: 1.8rem 0 .55rem;
}
.doc__body p { margin: 0 0 .85rem; }
.doc__body a { color: var(--gulf); }

.lede {
  font-size: 1.03rem;
  color: var(--ink);
  max-width: 38em;
}
.doc__body--prose h1 { margin-bottom: .7rem; }

.mono {
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
}
.muted { color: var(--ink-mute); font-size: .85em; }

.minimap {
  height: clamp(200px, 42vw, 300px);
  margin: 1.15rem 0;
  border-radius: var(--r-md);
  border: 1px solid var(--sand-deep);
  background: var(--sand-deep);
  overflow: hidden;
}

.actions--doc { margin-top: 0; }

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.facts th,
.facts td {
  text-align: left;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--sand-deep);
  vertical-align: top;
}
.facts th {
  font-weight: 600;
  color: var(--ink-mute);
  width: 42%;
  white-space: nowrap;
}

.facts thead th {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--dune);
}
.facts--3 th { width: auto; white-space: normal; }
.facts--3 tbody th { font-weight: 700; color: var(--gulf-deep); white-space: nowrap; }

.facts__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .93rem;
}
.facts__list li { margin-bottom: .35rem; }

/* Where a fact came from, and how far to trust it. */
.src {
  font-size: .78rem;
  color: var(--ink-mute);
  border-left: 3px solid var(--dune);
  padding: .1rem 0 .1rem .7rem;
  margin: .8rem 0 0;
}

.doc__body ol { padding-left: 1.2rem; margin: 0 0 .85rem; }
.doc__body ol li,
.doc__body > ul li { margin-bottom: .4rem; }

/* The neighbour steps are buttons in the app and links here; same look. */
.hop--link {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: .1rem;
}

.markerlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.markerlist a {
  display: block;
  padding: .4rem .55rem;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-sm);
  font-size: .86rem;
  text-decoration: none;
  color: var(--gulf-deep);
}
.markerlist a:hover { border-color: var(--gulf); background: #F1F8F6; }

.faq { margin: 0; }
.faq dt {
  font-weight: 700;
  color: var(--gulf-deep);
  margin-top: .9rem;
}
.faq dd { margin: .25rem 0 0; color: var(--ink-mute); }

.doc__foot {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 clamp(.9rem, 4vw, 1.5rem) 2.5rem;
  font-size: .78rem;
  color: var(--ink-mute);
  line-height: 1.55;
}
.doc__foot a { color: var(--gulf); }
.doc__legal { color: #7C8783; margin-top: .5rem; }

/* Homepage marker index — crawlable links inside the app's scrolling panel. */
.index { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--sand-deep); }
.index__h {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 .5rem;
}
.index__list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
}
.index__list a {
  display: block;
  min-width: 2.1rem;
  text-align: center;
  padding: .22rem .35rem;
  border: 1px solid var(--sand-deep);
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--gulf-deep);
  text-decoration: none;
}
.index__list a:hover { border-color: var(--gulf); background: #F1F8F6; }
.index__links { font-size: .82rem; }
.index__links a { color: var(--gulf); }

/* Search box on the 404 page — same control as the map header, on light ground. */
.find--doc {
  border: 2px solid var(--sand-deep);
  max-width: 16rem;
  margin: 0 0 1rem;
}
.find--doc:focus-within { border-color: var(--signal); box-shadow: none; }

/* Embed snippet builder. */
.bld__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin-bottom: .3rem;
}
.bld__lab { font-size: .72rem; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; color: var(--ink-mute); }
.bld__sel, .bld__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  padding: .4rem .5rem;
  border: 2px solid var(--sand-deep);
  border-radius: var(--r-sm);
  background: var(--shell);
  color: var(--ink);
}
.bld__num { width: 5.5rem; }
.bld__sel:focus, .bld__num:focus { outline: none; border-color: var(--signal); }
.bld__chk { font-size: .85rem; color: var(--ink-mute); display: inline-flex;
            align-items: center; gap: .35rem; }

.bld__prev {
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand-deep);
  line-height: 0;
}

.bld__code {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
  padding: .7rem;
  border: 2px solid var(--sand-deep);
  border-radius: var(--r-sm);
  background: #FAF8F3;
  color: var(--ink);
  resize: vertical;
}
.bld__code:focus { outline: none; border-color: var(--signal); }

/* Heart around the big numeral, in the info box and the marker-page hero.
   LIVES HERE, NOT IN styles.css, ON PURPOSE: it has to beat `.detail__id{margin:0}`
   and `.doc__num{margin:0}`. All three are single-class selectors, so the cascade
   decides — and page.css loads after styles.css on every page, including the map.
   Moved from styles.css where .doc__num was silently winning.

   Sized in em so one rule tracks the numeral at every breakpoint. Outline only,
   so the digits read straight through it. */
.num--heart {
  position: relative;
  isolation: isolate;
  padding: 0 .40em;
  /* The ring is taller than the line box, so buy vertical room or it collides
     with the panel edge above and the text below. */
  margin: .30em 0 .26em;
}
.num--heart::before {
  content: "";
  position: absolute;
  left: 50%;
  /* A heart is widest across its upper half and tapers to a point, so the ring
     sits BELOW the text centre — that puts the digits in the roomy part rather
     than the taper. Tuned against the two-digit case, which is the tight one. */
  top: 55%;
  transform: translate(-50%, -50%);
  width: 1.94em;
  height: 1.94em;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8112D' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 21.35 10.55 20.03C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}