/* ---------------------------------------------------------------------------
   Site navigation, 2026-09-06.

   One rail on the left of every page, homepage included; nothing on top.
   It shows the whole site at once, in the order the site is organised:

       collection            MERIT Hydro · 90 m
         product               FullBasin
           page                  Where does a pixel drain to?

   Planned collections stay in the list, greyed, so the three-way split is
   visible from any page. Indentation carries the hierarchy; no boxes, no
   uppercase group labels, no second navigation anywhere.

   Class names are new (fh-nav-*), so no rule from the older stylesheets
   applies to anything inside the rail. Load this file last.
--------------------------------------------------------------------------- */

.fh-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 500;
  display: flex; flex-direction: column; width: 290px;
  padding: 24px 0 0; overflow-y: auto;
  border-right: 1px solid #e4e9eb; background: #fafbfb;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}
body.fh-railed { margin-left: 290px; }

.fh-rail-brand {
  display: block; margin: 0 0 30px; padding: 0 20px;
  color: #183b48; font: 600 22px/1.25 var(--sans); letter-spacing: -.03em;
  text-decoration: none;
}

.fh-nav { display: block; }
.fh-nav-group + .fh-nav-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e6ebed; }

.fh-nav-collection {
  display: block; position: relative; padding: 7px 20px 9px; color: #183b48;
  font: 600 14px/1.5 var(--sans); letter-spacing: -.005em; text-decoration: none;
}
.fh-nav-name { display: block; }
a.fh-nav-collection:hover { color: #17596c; background: #f0f4f5; }
a.fh-nav-collection:hover .fh-nav-meta { color: #6f8791; }
.fh-nav-meta {
  display: block; margin: 2px 0 0; padding: 0;
  color: #8a9aa1; font: 400 12px/1.5 var(--sans); letter-spacing: 0;
}
.fh-nav-list { margin-top: 3px; }

.fh-nav-product {
  display: block; padding: 7px 20px 7px 32px; color: #2c4c58;
  font: 500 14px/1.5 var(--sans); text-decoration: none;
}
a.fh-nav-product:hover { color: #17596c; background: #f0f4f5; }

.fh-nav-page {
  display: block; position: relative; padding: 7px 20px 7px 44px;
  color: #526b76; font: 400 13.5px/1.55 var(--sans); text-decoration: none;
}
a.fh-nav-page:hover { color: #17596c; background: #f0f4f5; }

/* The current page is the only filled state in the rail. */
body.fh-railed .fh-rail .is-here { color: #17596c; font-weight: 600; background: #eef3f4; }
body.fh-railed .fh-rail .is-here::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #237286;
}
.fh-nav-product.is-here::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #237286;
}
.fh-nav-product { position: relative; }

/* A hairline splits the three questions from the two ways of getting data. */
.fh-nav-page.fh-nav-cut { margin-top: 9px; padding-top: 14px; border-top: 1px solid #e6ebed; }

/* Not yet published: still listed, never clickable. */
.fh-nav-product.is-soon, .fh-nav-group.is-planned .fh-nav-collection { color: #97a6ac; font-weight: 500; }
.fh-nav-product.is-soon em { font-style: normal; color: #a7b4b9; font-size: 12px; }
.fh-nav-group.is-planned .fh-nav-meta { color: #a7b4b9; }

.fh-rail-foot { margin-top: auto; padding: 26px 20px 0; }
.fh-rail-foot a, .fh-rail-foot button {
  display: block; margin: 0 0 7px; padding: 0; border: 0; background: none;
  color: #71868f; font: 400 12.5px/1.6 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.fh-rail-foot a:hover, .fh-rail-foot button:hover { color: #17596c; }

.fh-rail-toggle { display: none; }

@media (max-width: 900px) {
  .fh-rail {
    position: relative; inset: auto; width: auto; padding: 14px 0 10px;
    border-right: 0; border-bottom: 1px solid #e4e9eb;
  }
  body.fh-railed { margin-left: 0; }
  .fh-rail-brand { margin: 0; }
  .fh-rail-toggle {
    display: block; margin-top: 10px; padding: 8px 20px; color: #4c636e;
    font: 500 14px/1.5 var(--sans); list-style: none; cursor: pointer;
  }
  .fh-rail-toggle::-webkit-details-marker { display: none; }
  .fh-rail-toggle::after {
    content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .fh-rail-menu[open] .fh-rail-toggle::after { transform: rotate(225deg); margin-bottom: -2px; }
  .fh-rail-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6ebed; }
}

/* ---------------------------------------------------------------------------
   Second pass, 2026-09-07. Everything above was buried under four later
   passes that turned each link into a bordered card with an arrow, wrapped
   the collection in a disclosure, and put a check mark on the open one. A
   product then looked exactly like a page, and three levels read as one flat
   list. Those passes are gone; the rail is back to the design at the top of
   this file. Nesting does the work: <ul> inside <ul>, indented, with only the
   current page filled in.
--------------------------------------------------------------------------- */

.fh-nav-list { margin: 0; padding: 0; list-style: none; }
.fh-nav-list .fh-nav-list { margin: 0 0 4px; }

h2.fh-nav-heading { margin: 0; font: inherit; }
p.fh-nav-label {
  margin: 14px 0 3px; padding: 0 20px 0 32px;
  color: #93a5ac; font: 400 11.5px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase;
}

.fh-nav-product { padding-left: 32px; }
.fh-nav-page { display: flex; gap: 9px; padding-left: 44px; }
.fh-nav-page b {
  flex: 0 0 9px; color: #a3b2b8;
  font: 400 12px/1.62 var(--mono, ui-monospace, monospace);
}
.fh-nav-page span { display: block; min-width: 0; }
.fh-nav-page.is-here b { color: #17596c; }

.fh-nav-overview {
  display: block; position: relative; padding: 7px 20px 7px 32px;
  color: #526b76; font: 400 13.5px/1.55 var(--sans); text-decoration: none;
}
a.fh-nav-overview:hover { color: #17596c; background: #f0f4f5; }
body.fh-railed .fh-rail a.fh-nav-collection.is-here { background: #eef3f4; }

/* Not yet published: listed, never a link, never in the tab order. */
.fh-nav-product.is-soon { padding-top: 11px; cursor: default; }
.fh-nav-product.is-soon em {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 3px;
  background: #eef1f2; color: #7d8d94; font-size: 12px; font-style: normal;
}

/* The current page is filled; keyboard focus stays its own, separate ring. */
body.fh-railed .fh-rail a:focus-visible { outline: 2px solid #17596c; outline-offset: -2px; }

/* The rail is 290px wide on every page; an older stylesheet still says 264px. */
body.fh-railed.geo-site, body.fh-railed.fh-home { margin-left: 290px; }
@media (max-width: 900px) { body.fh-railed.geo-site, body.fh-railed.fh-home { margin-left: 0; } }

/* The footer button carries an icon from an older stylesheet; not in the rail. */
body.fh-railed .fh-rail .phone-btn::before { display: none; }

/* The map-view switch controls the page, so it now sits above the map, as one
   small pair of buttons. geoscience.css styles anything with this class as a
   full-width stack for the old sidebar, and its selectors carry two element
   names, so these have to match that weight to win. */
.gs-viewbar { margin: 0 0 20px; }
body.geo-site .gs-viewbar .gs-subnav {
  display: inline-flex; align-items: stretch; gap: 0; margin: 0; padding: 0;
  border: 1px solid #cfdade; border-left: 1px solid #cfdade; border-radius: 6px;
  overflow: hidden; background: #fff;
}
body.geo-site .gs-viewbar .gs-subnav button,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option {
  display: block; width: auto; min-height: 0; margin: 0; padding: 9px 15px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: #4c636e;
  font: 500 13.5px/1.45 var(--sans); text-align: left; white-space: nowrap; cursor: pointer;
}
body.geo-site .gs-viewbar .gs-subnav > * + * { border-left: 1px solid #e3eaec; }
body.geo-site .gs-viewbar .gs-subnav button strong,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option strong { font: inherit; }
body.geo-site .gs-viewbar .gs-subnav button.is-on,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-on { background: #17596c; color: #fff; }
body.geo-site .gs-viewbar .gs-subnav button.is-on::before { display: none; }
body.geo-site .gs-viewbar .gs-subnav button:hover { background: #eef3f4; }
body.geo-site .gs-viewbar .gs-subnav button.is-on:hover { background: #17596c; }
body.geo-site .gs-viewbar .gs-subnav .gs-view-option { cursor: default; }
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-unavailable,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-unavailable strong { color: #a7b4b9; }
body.geo-site .gs-viewbar .gs-subnav .fr-view-state { margin-left: 5px; color: inherit; font-size: 12px; opacity: .85; }

/* ---------------------------------------------------------------------------
   Third pass, 2026-09-15. The rail now holds two kinds of thing: the data
   collections (MERIT Hydro · 90 m, HydroSHEDS v2 · 30 m) and the tools
   (FlowDivide, FlowTopo). Each kind sits under a small label with a square
   in the kind's colour — teal for data, green for tools — and the current-
   page marker takes the same colour, so the colour says which kind you are
   in and nothing else. The collection meta line carries the release version
   (v1.0), which is also the segment in every product address.
--------------------------------------------------------------------------- */

.fh-nav-kind {
  --kind: #237286;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 0 20px;
  color: #7d8f96; font: 500 11px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.fh-nav-kind::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 1px; background: var(--kind);
}
.fh-nav-kind.is-tools { --kind: #5f8a6e; }
.fh-nav-kind.is-applications { --kind: #9a7b3f; }
.fh-nav-kind + .fh-nav-group { margin-top: 0; padding-top: 0; border-top: 0; }
.fh-nav-group + .fh-nav-kind { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e6ebed; }

/* A tool or an application is one entry: name and meta, no product level under it yet.
   (2026-09-15 later: a third kind, Applications — studies made with the collections and tools —
   in ochre; the rules below serve both kinds through .fh-nav-item.) */
.fh-nav-group.fh-nav-item + .fh-nav-group.fh-nav-item { margin-top: 2px; padding-top: 0; border-top: 0; }
.fh-nav-group.fh-nav-item .fh-nav-collection { padding: 6px 20px 7px; }
.fh-nav-group.fh-nav-item.is-planned .fh-nav-collection { cursor: default; }
body.fh-railed .fh-rail .fh-nav-tools .is-here::before { background: #5f8a6e; }
body.fh-railed .fh-rail .fh-nav-tools a.fh-nav-collection:hover { color: #3f6f52; }
body.fh-railed .fh-rail .fh-nav-applications .is-here::before { background: #9a7b3f; }
body.fh-railed .fh-rail .fh-nav-applications a.fh-nav-collection:hover { color: #7a5f2c; }

/* ---------------------------------------------------------------------------
   Fourth pass, 2026-09-15. Measured on the live site in a 797 px window: the
   rail ran to 1134 px, Tools sat at 689, Applications at 864 and the footer
   at 980 — below the screen on every page, with nothing to say so. Four
   changes, the structure kept:
   1. Only the collection the page is in shows its tree; the other collection
      is its heading alone with a small chevron, and the heading links into it.
      The home page shows both closed.
   2. The rail is 290 px, not 252, so the longest question ("What is upstream
      of a pixel like?", 205 px) sits on one line; the group and item spacing
      is a few pixels tighter.
   3. The kind labels Tools and Applications are links to /tools/ and
      /applications/, which nothing on the site pointed to before.
   4. FullRiver and FlowDivide, both unpublished, share one shape: name and a
      "coming soon" meta line.
   A fade at the bottom of the rail says there is more below; it sits in flow
   after the footer, so it disappears exactly when the end scrolls into view.
--------------------------------------------------------------------------- */

.fh-rail-brand { margin-bottom: 22px; }
.fh-nav-group + .fh-nav-group { margin-top: 14px; padding-top: 12px; }
.fh-nav-group + .fh-nav-kind { margin-top: 14px; padding-top: 12px; }
.fh-nav-collection { padding: 6px 20px 7px; }
.fh-nav-product { padding-top: 6px; padding-bottom: 6px; }
.fh-nav-page { padding-top: 5px; padding-bottom: 5px; }
.fh-nav-group.fh-nav-item .fh-nav-collection { padding: 5px 20px 6px; }
.fh-nav-page.fh-nav-cut { margin-top: 7px; padding-top: 11px; }

/* A closed collection: heading only, with a chevron at the right saying there is more inside. */
.fh-nav-group.is-closed .fh-nav-collection { padding-right: 36px; }
.fh-nav-group.is-closed .fh-nav-collection::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid #a3b2b8; border-bottom: 1.5px solid #a3b2b8; transform: rotate(-45deg);
}
.fh-nav-group.is-closed a.fh-nav-collection:hover::after { border-color: #17596c; }

/* The kind label as a link: same grey at rest, the kind's colour on hover and on its own overview page. */
.fh-nav-kind a { color: inherit; text-decoration: none; }
.fh-nav-kind a:hover, .fh-nav-kind.is-here a { color: var(--kind); }
body.fh-railed .fh-rail .fh-nav-kind.is-here { background: none; font-weight: 600; }
body.fh-railed .fh-rail .fh-nav-kind.is-here::before { position: static; width: 8px; background: var(--kind); }

/* FullRiver under FullBasin: the same name-and-meta shape as FlowDivide under Tools. */
.fh-nav-product.is-soon { display: block; padding-top: 6px; padding-bottom: 6px; }
.fh-nav-product.is-soon .fh-nav-name { display: block; }
.fh-nav-product.is-soon .fh-nav-meta { color: #a7b4b9; }

/* The fade at the foot of the rail. In flow after the footer and sticky to the bottom edge: while the
   rail overflows it lies over whatever scrolls beneath it; once the end is reached it is just the last
   24 px of the rail. */
.fh-rail-foot { padding-bottom: 0; }
.fh-rail::after {
  content: ''; flex: 0 0 auto; position: sticky; bottom: 0; height: 24px; margin-top: 8px;
  background: linear-gradient(to bottom, rgba(250,251,251,0), #fafbfb 70%); pointer-events: none;
}
@media (max-width: 900px) { .fh-rail::after { display: none; } .fh-rail { padding-bottom: 10px; } }

/* ---------------------------------------------------------------------------
   Fourth pass 2026-09-22: Tools first, and the data entries are the Full series.

   The rail now reads in the order the work runs — the tools compute the data,
   the data carries the applications. The data label keeps the teal of the old
   Collections label, because it names the same thing: data. An entry is one
   Full product on one baseline dataset (FullBasin · MERIT Hydro 90 m), so a
   dataset is a build of a product and not a level above it, and FullRiver is
   one entry beside the FullBasin builds instead of being repeated inside each
   of them.

   Under an open entry its releases stand side by side, newest first, each
   saying on one line what you get there — 1.1 shows and maps, 1.0 is the one
   with files. Neither is marked as replacing the other (Lulu 2026-09-22).
--------------------------------------------------------------------------- */
.fh-nav-kind.is-data { --kind: #237286; }

.fh-nav-version { display: flex; align-items: baseline; gap: 8px; }
.fh-nav-version .fh-nav-name { display: inline; }
.fh-nav-version .fh-nav-meta {
  display: inline; margin: 0; color: #8a9aa1; font: 400 11.5px/1.5 var(--sans);
}
a.fh-nav-version:hover .fh-nav-meta { color: #6f8791; }
.fh-nav-version.is-here .fh-nav-meta { color: #4e7783; }

/* ---------------------------------------------------------------------------
   The release chooser inside a page (2026-09-22).

   The rail says which releases a product has; this strip sits above the
   heading of every page that exists in more than one of them, and switches
   release without leaving the step you are reading. The two chips carry the
   same weight — neither replaces the other — and each says on one line what
   you get there, so a reader who lands on either one knows where they are.
--------------------------------------------------------------------------- */
.ov-versions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ov-versions a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 12px; border: 1px solid #dbe3e6; border-radius: 3px;
  background: #fff; color: #2c4c58; font: 500 13px/1.5 var(--sans); text-decoration: none;
}
.ov-versions a span { color: #8a9aa1; font-weight: 400; font-size: 11.5px; }
.ov-versions a:hover { border-color: #b7c7cd; color: #17596c; }
.ov-versions a:hover span { color: #6f8791; }
.ov-versions a.is-on { border-color: #237286; background: #eef3f4; color: #17596c; }
.ov-versions a.is-on span { color: #4e7783; }
.ov-versions-note { margin: 0 0 18px; color: #6f8791; font: 400 13px/1.6 var(--sans); max-width: 62ch; }

/* What changed between two releases, under the chips that choose them (2026-09-22). */
.fh-changes-head {
  margin: 4px 0 6px; color: #183b48; font: 600 .9375rem/1.5 var(--sans); letter-spacing: -.01em;
}
.fh-changes { margin: 0 0 12px; padding-left: 18px; max-width: 62ch; }
.fh-changes li { margin: 0 0 6px; color: #3e5a65; font: 400 13.5px/1.65 var(--sans); }
.fh-changes-block { margin-top: 18px; }

/* A release with no page of its own is a state, not a link: same chip, no hover, no pointer. */
.ov-versions > span { cursor: default; }
.ov-versions > span:not(.is-on) {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 12px; border: 1px dashed #dbe3e6; border-radius: 3px;
  background: #fff; color: #7d8f96; font: 500 13px/1.5 var(--sans);
}
.ov-versions > span.is-on {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 12px; border: 1px solid #237286; border-radius: 3px;
  background: #eef3f4; color: #17596c; font: 500 13px/1.5 var(--sans);
}
.ov-versions > span > span { font-weight: 400; font-size: 11.5px; color: #8a9aa1; }
.ov-versions > span.is-on > span { color: #4e7783; }

/* ---------------------------------------------------------------------------
   The three kinds as disclosures (2026-09-22, Lulu: "Tools，Datasets 和
   Applications 你点进去才会打开").

   One kind is open at a time — the one holding the page you are on, which the
   static HTML marks, and after that whichever one the reader last opened. So
   the rail is as deep as it needs to be and no deeper: the section you are
   reading is fully expanded, the other two are one line each, and the count
   beside a closed heading says what is inside without opening it.

   The kind's own overview page (/tools/, /applications/) is the first row
   inside it, not the heading, because the heading's job is to open and close.
--------------------------------------------------------------------------- */
.fh-nav-kind-group { margin: 0; }
.fh-nav-kind-group + .fh-nav-kind-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e6ebed; }

summary.fh-nav-kind {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 9px 20px; cursor: pointer; list-style: none;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
summary.fh-nav-kind::-webkit-details-marker { display: none; }
summary.fh-nav-kind:hover { color: var(--kind); background: #f2f6f7; }
summary.fh-nav-kind:focus-visible { outline: 2px solid var(--kind); outline-offset: -2px; }
.fh-nav-kind-name { flex: 1 1 auto; }

/* the count sits at the right, and turns into the open/closed chevron's companion */
.fh-nav-kind-count {
  flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 9px;
  background: #eef2f3; color: #7d8f96;
  font: 500 10.5px/1.6 var(--sans); letter-spacing: 0; text-align: center;
}
.fh-nav-kind-group[open] > summary .fh-nav-kind-count { background: #e3ecee; color: #4e7783; }

/* the chevron: right when closed, down when open */
summary.fh-nav-kind::after {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid #a3b2b8; border-bottom: 1.5px solid #a3b2b8;
  transform: rotate(-45deg); transition: transform .12s ease;
}
.fh-nav-kind-group[open] > summary.fh-nav-kind::after { transform: rotate(45deg); margin-top: -3px; }
summary.fh-nav-kind:hover::after { border-color: var(--kind); }

.fh-nav-kind-body { padding-bottom: 8px; }
.fh-nav-kind-body > .fh-nav-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* the overview row of a kind reads quieter than the entries under it */
.fh-nav-index .fh-nav-collection { color: #6f8791; font-weight: 400; }
.fh-nav-index a.fh-nav-collection:hover { color: #17596c; }

/* the kind colours, on the summary now rather than a paragraph */
summary.fh-nav-kind { --kind: #237286; }
summary.fh-nav-kind.is-tools { --kind: #5f8a6e; }
summary.fh-nav-kind.is-datasets { --kind: #237286; }
summary.fh-nav-kind.is-applications { --kind: #9a7b3f; }
body.fh-railed .fh-rail .fh-nav-datasets .is-here::before { background: #237286; }

/* Home sits above the three kinds: the page that says what FullHydro is (2026-09-22). */
.fh-nav-home { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #e6ebed; }
.fh-nav-home .fh-nav-name { font-weight: 600; }

/* ---------------------------------------------------------------------------
   A product above its builds (2026-09-22, Lulu: "FullBasin 下面两个数据，不是并
   列的，FullBasin 在上一级").

   FullBasin is one product built on two baseline grids, so it names itself once
   and the grids sit under it. Releases are not rows: a release is a state of a
   build, not another place in the site, so the rail stops at the pages and the
   chips at the top of each page switch release without leaving the step you are
   reading. The releases still show in a build's meta line, so a reader scanning
   the rail can see which ones exist.
--------------------------------------------------------------------------- */
.fh-nav-product-group { margin: 2px 0 0; }
.fh-nav-product-name {
  margin: 0; padding: 7px 20px 3px;
  color: #183b48; font: 600 14px/1.5 var(--sans); letter-spacing: -.01em;
}
.fh-nav-build > .fh-nav-collection { padding-left: 32px; }
.fh-nav-build > .fh-nav-collection .fh-nav-name { font-weight: 500; font-size: 13.5px; }
.fh-nav-build .fh-nav-page { padding-left: 46px; }
.fh-nav-build.is-closed > a.fh-nav-collection { position: relative; }
.fh-nav-build.is-closed > a.fh-nav-collection::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid #a3b2b8; border-bottom: 1.5px solid #a3b2b8; transform: rotate(-45deg);
}
.fh-nav-build.is-closed > a.fh-nav-collection:hover::after { border-color: #17596c; }

/* ---------------------------------------------------------------------------
   Fifth pass 2026-09-22 (Lulu: "tools、datasets 和 applications 要更明显一点，
   区分更大一点，字更大一点… 用户一进来一目了然").

   The three kinds were 11 px uppercase grey with an 8 px square — the quietest
   thing in the rail, although they are the thing a first-time reader has to see
   first. They are now the only large type in the rail: 16 px, dark, sentence
   case, on their own row with air above and below, and a 3 px bar in the kind's
   colour down the left edge. The square goes; the bar is the colour key and it
   also marks how far the section reaches. Open adds a tint and the kind's own
   colour on the word, so which section you are in is readable at a glance.

   Everything below a heading steps down hard — 13.5 px and grey — so the rail
   reads as three blocks, not as one long list.
--------------------------------------------------------------------------- */
.fh-nav-kind-group { margin: 0; border-top: 1px solid #e2e9eb; }
.fh-nav-kind-group + .fh-nav-kind-group { margin-top: 0; padding-top: 0; }
.fh-nav-kind-group:first-of-type { border-top: 0; }

summary.fh-nav-kind {
  gap: 10px; padding: 15px 18px 15px 17px;
  border-left: 3px solid var(--kind);
  color: #16394a; font: 600 16px/1.35 var(--sans);
  letter-spacing: -.012em; text-transform: none;
}
summary.fh-nav-kind::before { display: none; }          /* the bar replaces the square */
summary.fh-nav-kind:hover { color: var(--kind); background: #f3f7f8; }
.fh-nav-kind-group[open] > summary.fh-nav-kind { color: var(--kind); background: #f3f7f8; }

.fh-nav-kind-count {
  min-width: 20px; padding: 2px 7px; border-radius: 10px;
  background: #e8eef0; color: #6f8791; font: 600 11px/1.5 var(--sans);
}
.fh-nav-kind-group[open] > summary .fh-nav-kind-count { background: var(--kind); color: #fff; }

summary.fh-nav-kind::after {
  width: 7px; height: 7px; margin-left: 0;
  border-right-width: 2px; border-bottom-width: 2px; border-color: #b3c1c7;
}
.fh-nav-kind-group[open] > summary.fh-nav-kind::after { border-color: var(--kind); }

.fh-nav-kind-body { padding: 4px 0 14px; border-left: 3px solid var(--kind-faint, #edf2f3); }
.fh-nav-kind-group.is-tools .fh-nav-kind-body { --kind-faint: #e2ece6; }
.fh-nav-kind-group.is-datasets .fh-nav-kind-body { --kind-faint: #dde9ec; }
.fh-nav-kind-group.is-applications .fh-nav-kind-body { --kind-faint: #efe7d8; }

/* Home reads as the first row of the rail, not as a fourth kind. */
.fh-nav-home { margin: 0 0 4px; padding: 0 0 10px; border-bottom: 1px solid #e2e9eb; }
.fh-nav-home .fh-nav-collection { padding: 11px 20px 9px; }
.fh-nav-home .fh-nav-name { color: #16394a; font: 600 15px/1.35 var(--sans); letter-spacing: -.012em; }

/* An earlier release says so once, at the top of each of its pages, and points at the current one.
   When it is retired the whole v1.0 folder goes and nothing else has to change (2026-09-22). */
.fh-earlier-note {
  margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid #c9b48a; background: #fbf7ef;
  color: #5c5140; font: 400 13.5px/1.6 var(--sans); max-width: 62ch;
}
.fh-earlier-note b { color: #4a4030; }
.fh-earlier-note a { color: #7a5f2c; }
/* the earlier release in the rail, at the foot of its build */
.fh-nav-earlier { color: #8a9aa1; font-size: 13px; }
.fh-nav-earlier.is-on, a.fh-nav-earlier:hover { color: #7a5f2c; }

/* ---------------------------------------------------------------------------
   The datasets tree, tightened (2026-09-22, Lulu: "看着好乱").

   Five levels live here — kind, product, build, release, page — and only one
   chain is ever open, so the depth is fixed. What made it read as a mess was
   the indent: each level stepped right by 12 px, so by the page rows the text
   had 56 px of gutter in a 262 px rail and every label wrapped. The steps are
   4 px now, and the levels are told apart by weight and size instead of by how
   far right they sit. The page rows keep their own gutter for the number.
--------------------------------------------------------------------------- */
.fh-nav-product-name { padding: 9px 20px 2px; font-size: 14px; }
.fh-nav-product-name a { color: inherit; text-decoration: none; }
.fh-nav-product-name a:hover { color: #17596c; }

.fh-nav-build > .fh-nav-collection { padding: 6px 20px 6px 24px; }
.fh-nav-build > .fh-nav-collection .fh-nav-name { font-weight: 500; font-size: 13.5px; }
.fh-nav-build > .fh-nav-collection .fh-nav-meta { font-size: 11.5px; }

.fh-nav-version {
  display: flex; align-items: baseline; gap: 7px; position: relative;
  padding: 5px 20px 5px 28px; color: #5d7681;
  font: 500 12.5px/1.5 var(--sans); text-decoration: none;
}
.fh-nav-version .fh-nav-name { display: inline; }
.fh-nav-version .fh-nav-meta { display: inline; margin: 0; font-size: 11px; color: #9aa8ae; }
a.fh-nav-version:hover { color: #17596c; background: #f2f6f7; }
.fh-nav-release.is-shown > .fh-nav-version { color: #17596c; }
body.fh-railed .fh-rail .fh-nav-version.is-here { background: #eef3f4; font-weight: 600; }

/* the pages of the open release: the number in its own gutter, the label beside it */
.fh-nav-release .fh-nav-page { padding: 6px 20px 6px 46px; font-size: 13px; }
.fh-nav-release .fh-nav-page b { left: 28px; }

/* The row that leads to a kind's own page read as faded grey — lighter than the "coming soon" items
   under it, so it looked disabled rather than clickable. It takes the kind's colour and an arrow now,
   at the same size as the entries: it is a different kind of thing, not a bigger one (2026-09-22). */
.fh-nav-index .fh-nav-collection { color: var(--kind, #237286); font-weight: 500; }
.fh-nav-index a.fh-nav-collection:hover { color: #0e3f4e; background: #f2f6f7; }
.fh-nav-tools.fh-nav-index .fh-nav-collection { --kind: #4d7a5d; }
.fh-nav-datasets.fh-nav-index .fh-nav-collection { --kind: #1e6a7d; }
.fh-nav-applications.fh-nav-index .fh-nav-collection { --kind: #8a6d34; }
.fh-nav-index .fh-nav-name { display: flex; align-items: baseline; gap: 6px; }
.fh-nav-go { font-size: 12px; opacity: .75; }
.fh-nav-index + .fh-nav-group, .fh-nav-index + .fh-nav-product-group { margin-top: 6px; }
/* what to read before fetching the archive, on the page that offers it */
.ov-before { margin: 10px 0 0; color: #5d7681; font: 400 13.5px/1.65 var(--sans); max-width: 62ch; }