/* HydroSHEDS v2 30 m pages: map on the left, table on the right (2026-09-12).
   Everything else comes from the site's shared sheets; this file only widens
   the right column and styles the two tables. */
body.geo-site.fr-page .fr-workspace.hs30-workspace { --fr-map-height: clamp(520px, 76vh, 940px); grid-template-columns: minmax(0, 1fr) clamp(360px, 33vw, 520px); }   /* the map larger, the table narrower (Lulu 2026-09-11) */
body.geo-site.fr-page.hs30-page .map-frame #map { max-height: 940px; }
body.geo-site.fr-page .hs30-side { max-height: min(76vh, 940px); overflow: auto; padding-right: 6px; }
body.hs30-page .table-status { margin: 12px 0 8px; color: #617984; font-size: 13.5px; line-height: 1.55; }
body.hs30-page .table-scroll { max-height: 46vh; overflow: auto; border: 1px solid #e2e9ec; border-radius: 4px; background: #fff; }
body.hs30-page .hs30-table { width: 100%; border-collapse: collapse; font: 400 13px/1.45 var(--sans, Inter, sans-serif); color: #354d57; }
body.hs30-page .hs30-table th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; background: #f2f6f8; color: #4e6a76; font-weight: 500; text-align: right; white-space: nowrap; border-bottom: 1px solid #dbe4e7; }
body.hs30-page .hs30-table td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid #edf2f4; font-variant-numeric: tabular-nums; }
body.hs30-page .hs30-table th.left, body.hs30-page .hs30-table td.left { text-align: left; white-space: normal; }
body.hs30-page .hs30-table td.mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
body.hs30-page #bsnTbl tbody tr, body.hs30-page #rgnTbl tbody tr { cursor: pointer; }
body.hs30-page #bsnTbl tbody tr:hover, body.hs30-page #rgnTbl tbody tr:hover { background: #f4f8f9; }
body.hs30-page .hs30-table tr.hl td { background: #fde9d9; color: #10262f; }
body.hs30-page .hs30-table tr.no-poly td:first-child::after { content: " †"; color: #93a5ac; }   /* a region with no cell left at the map's resolution */
body.hs30-page .hs30-more { margin: 10px 0 0; min-height: 36px; padding: 5px 0; color: #23687a; border: 0; background: none; font: 400 14px/1.5 var(--sans, Inter, sans-serif); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
body.hs30-page .hs30-find { display: inline-flex; align-items: center; gap: 8px; }
body.hs30-page .hs30-find label { color: #617984; font-size: 14px; }
body.hs30-page .hs30-find input { width: 9.5em; padding: 6px 8px; border: 1px solid #cfdade; border-radius: 4px; font: 400 14px/1.4 var(--sans, Inter, sans-serif); }
body.hs30-page .hs30-find button, body.hs30-page .fr-toolbar #clearBtn { min-height: 34px; padding: 5px 12px; border: 1px solid #cfdade; border-radius: 4px; background: #fff; color: #23687a; font: 500 13.5px/1.4 var(--sans, Inter, sans-serif); cursor: pointer; }
body.hs30-page .fr-toolbar #clearBtn:hover, body.hs30-page .hs30-find button:hover { background: #eef3f4; }
body.hs30-page .hs30-hover .maplibregl-popup-content { padding: 4px 9px; font: 400 12.5px/1.5 var(--sans, Inter, sans-serif); color: #10262f; border-radius: 3px; box-shadow: 0 2px 8px rgba(11, 26, 38, .18); }
body.hs30-page .hs30-hover .maplibregl-popup-tip { display: none; }
body.hs30-page .maplibregl-ctrl-attrib { font-size: 11px; }
body.hs30-page .hs30-files td:first-child { white-space: nowrap; }   /* file names stay on one line; the description wraps */
@media (max-width: 1000px) {
  body.geo-site.fr-page .hs30-side { max-height: none; overflow: visible; }
  body.hs30-page .table-scroll { max-height: 60vh; }
}

/* 2026-09-11 evening: four partitions, real table columns; the column switches and grips come from /fh-tables.css. */
body.hs30-page .gs-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
body.geo-site.hs30-page .gs-viewbar .gs-subnav.hs30-schemes button { font-weight: 400; padding: 8px 12px; }
body.geo-site.hs30-page .gs-viewbar .gs-subnav.hs30-schemes button strong { font-weight: 500; }
body.hs30-page .hs30-table { width: auto; min-width: 0; }
body.hs30-page .hs30-table th { position: sticky; top: 0; overflow: hidden; text-overflow: ellipsis; font: 500 12px/1.4 var(--mono, ui-monospace, monospace); text-transform: none; letter-spacing: 0; }
body.hs30-page .hs30-table td { overflow: hidden; text-overflow: ellipsis; }
body.hs30-page .hs30-files { table-layout: auto; width: 100%; }
body.hs30-page .hs30-files th { font: 500 12px/1.4 var(--sans, Inter, sans-serif); }
body.hs30-page .maplibregl-ctrl-group.hs30-home button { width: auto; height: 29px; padding: 0 10px; font: 500 12.5px/29px var(--sans, Inter, sans-serif); color: #23687a; white-space: nowrap; }
body.hs30-page .gs-viewbar.hs30-schemes-row { margin-top: -8px; }
body.hs30-page .hs30-loading { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 4px; background: rgba(255,255,255,.9); color: #4e6a76; font: 500 13.5px/1.4 var(--sans, Inter, sans-serif); pointer-events: none; }
body.hs30-page .map-frame { position: relative; }

/* 2026-09-11 night: one page for both continents. Three rows, three looks (Lulu: 让读者用着舒服看着舒服):
   the continent as text tabs with a thin underline and its HydroBASINS level-1 number, the mask as the
   solid two-way switch the site already has, the partition as small pills. Greyed continents are not computed yet. */
body.hs30-page .gs-title h1 .hs30-h1-continent { font-weight: inherit; }
body.hs30-page .hs30-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; }
body.hs30-page .hs30-row-label { min-width: 68px; color: #7d8f97; font: 500 11.5px/1.4 var(--sans, Inter, sans-serif); letter-spacing: .05em; text-transform: uppercase; }
body.hs30-page .hs30-continents { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid #e2e9ec; }
body.hs30-page .hs30-continents a, body.hs30-page .hs30-continents span { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 0 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #23687a; font: 400 14px/1.4 var(--sans, Inter, sans-serif); text-decoration: none; }
body.hs30-page .hs30-continents a strong { font-weight: 400; }
body.hs30-page .hs30-continents a:hover:not(.is-on) { border-bottom-color: #b9c9cf; }
body.hs30-page .hs30-continents a.is-on { color: #10262f; border-bottom-color: #23687a; }
body.hs30-page .hs30-continents a.is-on strong { font-weight: 600; }
body.hs30-page .hs30-continents span.is-soon { color: #a9b6bc; cursor: not-allowed; }
body.hs30-page .hs30-continents .hs30-l1 { color: #a9b6bc; font: 400 11.5px/1 var(--mono, ui-monospace, monospace); }
body.hs30-page .hs30-continents a.is-on .hs30-l1 { color: #23687a; }
body.hs30-page .hs30-schemes { display: flex; flex-wrap: wrap; gap: 6px; }
body.hs30-page .hs30-schemes button { padding: 4px 12px; border: 1px solid #cfdade; border-radius: 999px; background: #fff; color: #354d57; font: 400 12.5px/1.5 var(--sans, Inter, sans-serif); cursor: pointer; }
body.hs30-page .hs30-schemes button strong { font-weight: 500; }
body.hs30-page .hs30-schemes button small { margin-left: 4px; color: #7d8f97; font-size: 11.5px; }
body.hs30-page .hs30-schemes button:hover:not(.is-on) { background: #f4f8f9; }
body.hs30-page .hs30-schemes button.is-on { background: #e7f0f3; border-color: #23687a; color: #10262f; }
body.hs30-page .hs30-schemes-row { margin-top: -4px; }
body.hs30-page .hs30-continent-files h3 { margin: 22px 0 8px; font: 500 15px/1.4 var(--sans, Inter, sans-serif); color: #10262f; }
body.hs30-page .hs30-continent-files .table-scroll { max-height: none; }
body.hs30-page .fh-plain-list { margin: 8px 0 0; padding-left: 18px; }