/* ---------------------------------------------------------------------------
   Tools pages, 2026-09-15 (tools/build_tools_pages.py). Loaded on /tools/flowtopo/
   only, after the site's stylesheets; every class here starts with ft-.
   The page is a doc-page (header with the lede, sections split into a
   heading column and a body column); this file adds what a tool page
   needs: a kicker over the title, a row of links, clip and figure grids,
   a record list, a small table, folded maps.
--------------------------------------------------------------------------- */

body.tools-page .ft-kicker {
  margin: 0 0 6px; color: #5f8a6e; font: 500 12px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
body.tools-page .ft-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
body.tools-page .ft-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 6px;
  border: 1px solid #17596c; background: #17596c; color: #fff; font: 500 14px/1.3 var(--sans); text-decoration: none;
}
body.tools-page .ft-btn:hover { background: #124a5b; border-color: #124a5b; }
body.tools-page .ft-btn.is-ghost { background: #fff; color: #17596c; border-color: #b9cbd1; }
body.tools-page .ft-btn.is-ghost:hover { background: #eef3f4; border-color: #17596c; }

body.tools-page .ft-note { color: #5c7480; font-style: italic; }
body.tools-page .sh-body h3.sub-h { color: #233f4b; }

/* the clips: three across, each a still until it scrolls into view (tools.js plays it, muted, looping) */
body.tools-page .ft-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 8px 0 22px; }
body.tools-page .ft-clips-tall { grid-template-columns: repeat(3, minmax(0, 270px)); }
body.tools-page .ft-clip { margin: 0; min-width: 0; }
body.tools-page .ft-clip-frame {
  display: block; width: 100%; overflow: hidden; border-radius: 4px; background: #000;
  border: 1px solid #dce5e8;
}
body.tools-page .ft-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.tools-page .ft-clip figcaption { margin: 9px 0 0; color: #405966; font: 400 13.5px/1.55 var(--sans); }
body.tools-page .ft-clip figcaption b { display: block; color: #233f4b; font-weight: 600; }
body.tools-page .ft-clip figcaption code { display: inline-block; margin: 2px 0 4px; color: #285c6e; font-size: 12.5px; }
body.tools-page .ft-clip figcaption span { display: block; }

body.tools-page .ft-figure { margin: 8px 0 18px; }
body.tools-page .ft-figure img { display: block; width: 100%; height: auto; border: 1px solid #dce5e8; border-radius: 4px; }
body.tools-page .ft-figure figcaption { margin: 9px 0 0; color: #5c7480; font: 400 13.5px/1.55 var(--sans); }
body.tools-page .ft-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0 0 24px; }
body.tools-page .ft-pair b { display: block; color: #233f4b; font-weight: 600; }
body.tools-page .ft-pair code { color: #285c6e; font-size: 12.5px; }
body.tools-page .ft-pair p { margin: 6px 0 0; }

body.tools-page .ft-list { margin: 0 0 18px; padding-left: 20px; color: #405966; }
body.tools-page .ft-list li { margin: 0 0 10px; line-height: 1.65; }
body.tools-page .ft-list li b { color: #233f4b; font-weight: 600; }

body.tools-page .ft-details { margin: 6px 0 14px; padding: 12px 16px; border: 1px solid #dce5e8; border-radius: 4px; background: #f7f9fa; }
body.tools-page .ft-details summary { cursor: pointer; color: #196579; font: 500 15px/1.5 var(--sans); }
body.tools-page .ft-details[open] summary { margin-bottom: 8px; }
body.tools-page .ft-details p { color: #405966; }
body.tools-page .ft-map img { display: block; width: 100%; height: auto; margin: 6px 0 10px; border: 1px solid #dce5e8; border-radius: 4px; background: #fff; }

/* the table: plain, left-aligned, on top of the site's global nowrap/right-aligned cells */
body.tools-page .ft-table { width: auto; margin: 8px 0 14px; border-collapse: collapse; font: 400 14px/1.5 var(--sans); }
body.tools-page .ft-table th, body.tools-page .ft-table td {
  position: static; padding: 6px 18px 6px 0; border-bottom: 1px solid #dce5e8; background: none;
  text-align: left; white-space: normal; color: #405966; font-weight: 400;
}
body.tools-page .ft-table th { color: #5c7480; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
body.tools-page .ft-table td:last-child, body.tools-page .ft-table th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
body.tools-page .ft-table tr.hl td { color: #233f4b; font-weight: 600; }

body.tools-page .ft-records { margin: 0 0 8px; }
body.tools-page .ft-records > div { padding: 12px 0; border-top: 1px solid #dce5e8; }
body.tools-page .ft-records > div:first-child { border-top: 0; padding-top: 0; }
body.tools-page .ft-records dt { color: #233f4b; font: 600 15.5px/1.5 var(--sans); }
body.tools-page .ft-records dt a { color: #196579; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.tools-page .ft-doi { margin-left: 8px; color: #7d8f96; font: 400 12.5px/1.5 var(--mono, ui-monospace, monospace); }
body.tools-page .ft-records dd { margin: 4px 0 0; color: #405966; line-height: 1.65; }

body.tools-page pre { margin: 8px 0 16px; }
body.tools-page pre code { font: 400 13px/1.55 var(--mono, ui-monospace, monospace); }

@media (max-width: 900px) {
  body.tools-page .ft-clips, body.tools-page .ft-clips-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tools-page .ft-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body.tools-page .ft-clips, body.tools-page .ft-clips-tall { grid-template-columns: minmax(0, 1fr); }
}