/* The two ways out, shared by every map and every creature page — its own file because the
   maps load map.css and the creature pages load plate.css, and one rule written twice is one
   rule that drifts. Top LEFT by founder order (2026-08-16): physical left, not the RTL
   leading side.

   Redrawn 2026-08-17 by founder order ("not very windows — creative, like apple"): the trail
   is one frosted capsule — glass blur, hairline edge, the whole trail in the display face and
   bold — instead of bare text links on the page. Each step lights its own soft pill on
   hover/focus. The old bare-text treatment is archived with the round's files. */

.topnav {
  position: fixed;
  z-index: 30;
  inset-block-start: max(12px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100vw - 28px);
  /* The cap alone was the whole overflow rule, so a fifth step ran 123 px past the glass
     with nothing to catch it. The capsule scrolls instead, and its own bar is hidden: the
     trail already shows there is more by ending mid-word at the edge. */
  overflow-x: auto;
  scrollbar-width: none;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  /* 0.42 let the picture through: over the kelp map's warm water the mint read 2.79:1 and
     over the depth screen's sand 4.33:1, both under the 4.5 a name has to hold. At 0.78 the
     glass carries its own floor — 5.62:1 against pure white, the brightest thing any
     photograph can put under it — so no map can dim a way out. Alpha, not a brightness
     filter: alpha composites everywhere, and backdrop-filter is a request. */
  background: rgba(9, 15, 19, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  /* The trail runs left→right — مخلوقات in the corner, the steps after it — while each
     name stays RTL text on its own. In-flow navs inherit the same run, so the name is on
     the left there too, not just when the nav is fixed. */
  direction: ltr;
}
.topnav::-webkit-scrollbar { display: none; }

/* `hidden` is set on this nav by `door.js` on the opening and on the three signs, and a
   bare `display: flex` outranks the browser's own rule for the attribute — so the capsule
   stood on both screens and a press skipped البسملة and the ayah. Written on the class so
   it outranks the line above it rather than tying with it. */
.topnav[hidden] { display: none; }

.topnav a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  /* A finger needs 44 px and these stood at 32 to 38. The height comes from the box, not
     from more space around the word, so the trail keeps its width and the deepest capsule
     stays inside its cap. The steps never shrink; a long trail scrolls. */
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  /* The resting dim was 0.85, which is 15% of the glass mixed back into the word: 6.17:1
     measured became 4.93:1 as the reader receives it. The pill's own tint carries the hover
     answer, so the word can stand at full strength. */
  transition: background-color 180ms ease;
}
.topnav a:hover, .topnav a:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}
.topnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The press answer, added 2026-08-18 from the transition matrix. `:hover` does reach a finger --
   Chromium synthesises it after touchend -- but it arrives through a 180 ms transition on a pill
   about half a percent of a phone screen, and measured on the creature page's flat field it moved
   0.18% of the frame, under the 0.2% a frame differ calls a change at all. So the reader pressed
   مخلوقات and the screen said nothing for 777 ms, until the next page painted. `:active` lands on
   the press frame by definition, and it is the scale that carries it: geometry reads over a
   photograph and over a flat dark field alike, where a tint only reads over one of them. */
.topnav a:active {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(0.93);
  transition-duration: 0s;
}

.top-home {
  font-size: 17px;
  font-weight: 800;
}

/* On a page that scrolls, words pass behind the capsule — its own glass is the background
   it needs, so the old full-width gradient veil is gone. The class stays on the pages. */
.topnav-veil { }

/* And when that page's own words start at the very top — no opening picture to stand over —
   the nav takes its line in the flow instead, above the first heading rather than on it, and
   sticks to the top edge from there. Which is what «whenever» has to mean on a long page. */
.topnav-flow {
  position: sticky;
  inset-block-start: 8px;
  /* In the RTL flow a shrunk box hugs the right edge; the auto right margin absorbs the
     free space instead, so the capsule stands on the physical left like the fixed one. */
  margin: 0 auto 10px 0;
}

/* One step down the trail, named. A soft chevron between steps, pointing the way the trail
   runs; it belongs to the capsule, not to the word, so it never underlines or lights. */
.top-up, .top-worlds { font-size: 13.5px; }
.top-up::before, .top-worlds::before {
  content: '›';
  margin-inline-end: 9px;
  margin-inline-start: -7px;
  font-weight: 400;
  color: var(--accent);
  opacity: 0.38;
}

/* On a map the title shared this corner. It moves down under the nav rather than the nav
   moving away from where it was asked to stand. Both numbers carry the 6.5 px the capsule
   grew when its steps reached 44 px, so the title keeps the same line it always had. */
.map-title { inset-block-start: max(65px, calc(env(safe-area-inset-top) + 53px)); }

/* `.top-credit` — the «من أين الصور؟» line at the end of the reading — stood here until
   2026-09-03, when the founder asked for it off every page. topnav.js no longer renders it,
   so the rules matched nothing and went with it; they are kept verbatim in
   archive/2026-09-03_chrome/site_app_topnav.css if that line is ever wanted back. The way to
   the credits page is now the word المصدر under each photograph (cards.js, plate.js), and
   the maps keep their own credit mark, which is `.map-credit` and is not this. */

/* A pop-up is modal, so these links are already unreachable under it — going quiet at the
   same moment as the rest of the chrome is the honest reading of that. */
html.popped .topnav { opacity: 0; }
html:not(.popped) .topnav { transition: opacity 260ms ease 120ms; }

@media (prefers-reduced-motion: reduce) {
  .topnav a, html:not(.popped) .topnav { transition: none; }
  /* The press still answers -- it is a state, not motion, and a reader who asks for less
     animation is not asking to be told nothing happened. Only the travel goes. */
  .topnav a:active { transform: none; }
}