/* Layout: department-style inner pages. Blue header band with tab navigation; each page has a
   ruled title, a grey breadcrumb bar, a main column and a right rail (filter block + section box);
   blue three-column footer over a dark grey bar. Single light theme by design. */
:root {
  --blue: #223887;        /* header, footer, primary controls */
  --blue-dark: #1d3073;
  --navy: #011f5b;
  --red: #990000;         /* selection and date-window accent only */
  --link: #0f4677;
  --link-2: #235579;
  --text: #333333;
  --muted: #6f6f79;
  --rule: #dedede;
  --line: #dddddd;
  --dots: #e2e4e6;
  --soft: #f7f7f7;
  --crumb: #f5f5f5;
  --stripe: #f9f9f9;
  --bar: #44464b;
  --white: #ffffff;
  /* map */
  --sea: #dfe8f0;
  --grid: #c9d5df;
  --land: #f5f2ea;
  --land-edge: #9fb0bf;  /* coastline */
  --empire: #ecdfc6;
  --empire-edge: #b0895a;
  --prov: #c4a57c;
  --river: #6b98c4;
  --dot-off: #b4bccb;
  --f-head: Poppins, Helvetica, Roboto, Arial, sans-serif;
  --f-body: "Gentium Book Plus", "Gentium Basic", Georgia, "Times New Roman", Times, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 17px/1.43 var(--f-body); }
body.map-full { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0 0 14px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #66afe9; outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.container { max-width: 1480px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- header band ---------- */
.site-header { background: var(--blue); color: var(--white); padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--white); font: 18px/20px var(--f-body); padding: 15px 0; }
.brand:hover { text-decoration: none; opacity: .9; }
.brand svg { flex: none; }
.main-nav { display: flex; flex-wrap: wrap; gap: 0 4px; flex: 1 1 auto; }
.main-nav a { color: var(--white); font: 400 19px/20px var(--f-head); padding: 10px 15px; }
.main-nav a:hover { background: rgb(255 255 255 / .14); text-decoration: none; }
.main-nav a.active { background: var(--white); color: var(--blue); font-weight: 700; }

/* ---------- page frame ---------- */
.page { padding-block: 24px 56px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(264px, 21vw, 320px); gap: 40px; align-items: start; }
.col-main { min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.page-header { font-size: 36px; padding-bottom: 24px; border-bottom: 2px solid var(--rule); margin-bottom: 16px; overflow-wrap: anywhere; }
.page-sub { font-style: italic; margin: -6px 0 16px; }
.breadcrumb { list-style: none; margin: 0 0 22px; padding: 8px 15px; background: var(--crumb); border-radius: 4px; display: flex; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "/"; padding: 0 9px; color: #c4c4c4; }
.breadcrumb a { color: var(--text); }
.breadcrumb li[aria-current] { color: #96969f; }
h2.sub { font-size: 26px; margin: 34px 0 16px; }
h3.sub { font-size: 20px; margin: 26px 0 10px; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1.2 var(--f-head); letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--blue); border-radius: 0; background: var(--white); color: var(--blue); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--blue); color: var(--white); text-decoration: none; }
.btn.solid { background: var(--blue); color: var(--white); }
.btn.solid:hover { background: var(--blue-dark); }
.btn.sm { padding: 7px 10px; font-size: 11.5px; letter-spacing: 1.2px; }
.btn.on-blue { border-color: var(--white); background: transparent; color: var(--white); }
.btn.on-blue:hover { background: var(--white); color: var(--blue); }
.btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.cta { font: 800 11.5px/1.7 var(--f-head); text-transform: uppercase; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cta::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.cta.back::after { display: none; }
.cta.back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.cta:hover { text-decoration: underline; }
.cta[disabled] { opacity: .35; pointer-events: none; }

/* ---------- result bar ---------- */
.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.result-bar .count b { font: 600 20px var(--f-head); color: var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 10px; border: 1px solid var(--line); background: var(--soft); border-radius: 3px; font: 13px var(--f-head); color: var(--text); cursor: pointer; }
.chip i { font-style: normal; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.chip:hover { border-color: var(--blue); }
.chip:hover i { background: var(--blue); color: var(--white); }
.result-bar .grow { flex: 1; }
#openFilters { display: none; }

/* ---------- right rail: filter block ---------- */
.block-title { font-size: 28px; margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.panel-close { display: none; border: 1px solid var(--line); background: var(--white); width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; }
.form-item { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.control-label { display: block; font-weight: 700; margin-bottom: 3px; padding: 0; }
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font: 14px/20px var(--f-body); color: #555; background: var(--white); border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgb(0 0 0 / .075); }
.form-control:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgb(0 0 0 / .075), 0 0 8px rgb(102 175 233 / .6); }
.form-control::placeholder { color: #999; }
.msel { position: relative; }
.msel > summary { list-style: none; cursor: pointer; padding-right: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.msel > summary::-webkit-details-marker { display: none; }
.msel > summary::after { content: ""; position: absolute; right: 12px; top: 10px; width: 8px; height: 8px; border-right: 3px solid var(--link-2); border-bottom: 3px solid var(--link-2); transform: rotate(45deg); }
.msel[open] > summary { border-color: #66afe9; }
.msel.has > summary { color: var(--blue); font-weight: 700; }
.msel-list { position: absolute; z-index: 30; left: 0; right: 0; top: 37px; max-height: 280px; overflow: auto; background: var(--white); border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgb(0 0 0 / .175); padding: 5px 0; }
.opt { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 10px; font-size: 15px; line-height: 1.3; cursor: pointer; }
.opt:hover { background: var(--crumb); }
.opt input { margin: 0; width: 14px; height: 14px; accent-color: var(--blue); }
.opt .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .c { font: 12px var(--f-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.opt.zero { opacity: .45; }
.checks .opt { padding: 2px 0; }
.checks .opt:hover { background: none; }
.date-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 6px; }
.help { font-size: 14.5px; font-style: italic; color: var(--muted); margin: 5px 0 0; line-height: 1.3; }
.help b { font-style: normal; color: var(--red); font-weight: 700; }

/* ---------- right rail: section box ---------- */
.section-nav { background: var(--soft); padding: 22px 11px 14px; }
.section-nav .section-title { font: 400 18px/1.45 var(--f-head); color: var(--blue); padding-top: 12px; margin-bottom: 18px; position: relative; }
.section-nav .section-title::before { content: " "; position: absolute; left: 0; top: 0; width: 35px; height: 5.6px; background: var(--blue); }
.section-nav a, .section-nav .side-link { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #c3c3c3; padding: 13px 0 10px; font: 400 14px/1.45 var(--f-head); color: var(--link-2); cursor: pointer; }
.section-nav a.active { font-weight: 600; color: var(--blue); }
.section-nav .side-note { font-size: 14.5px; font-style: italic; color: var(--muted); margin: 8px 0 0; }
.locator { display: block; width: 100%; height: 170px; background: var(--sea); border: 1px solid var(--line); cursor: pointer; }

/* ---------- map ---------- */
.map-stage { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); }
.stage-bar { display: none; }
.layers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--stripe); font: 13px/1.3 var(--f-head); }
.layers label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.layers input { margin: 0; accent-color: var(--blue); }
.layers .grow { flex: 1; }
.sw { display: inline-block; width: 14px; height: 10px; }
.pop-head { margin: 6px 0 -2px; padding-top: 10px; border-top: 1px dotted var(--dots); font: 600 11.5px var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sw-group { width: 19px; height: 19px; border-radius: 50%; background: var(--blue); color: var(--white); font: 600 9.5px/19px var(--f-head); text-align: center; font-style: normal; }
.pop-select { display: flex; align-items: center; gap: 8px; }
.pop-select select { flex: 1; min-width: 0; font: 14px var(--f-head); padding: 4px 6px; }
.pop-note { margin: 0; max-width: 250px; font: italic 14px/1.35 var(--f-body); color: var(--muted); }
.pop-panel label.out { opacity: .5; }
.sw-emp { background: var(--empire); box-shadow: inset 0 0 0 1.5px var(--empire-edge); }
.sw-prov { height: 0; border-top: 2px dashed var(--prov); }
.sw-land { background: var(--land); box-shadow: inset 0 0 0 1px var(--land-edge); }
.sw-relief { background: linear-gradient(135deg, #f4f4f0 0 45%, #b9b6ab 45% 60%, #e6e4dc 60%); box-shadow: inset 0 0 0 1px var(--land-edge); }
.sw-river { height: 0; border-top: 2px solid var(--river); }
.layers select { font: 13px var(--f-head); height: 28px; padding: 2px 6px; margin-left: 4px; border: 1px solid #ccc; border-radius: 4px; background: var(--white); color: var(--text); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; padding: 7px 12px; border-bottom: 1px solid var(--line); font: 12.5px/1.3 var(--f-head); color: var(--text); background: var(--white); }
.map-legend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend .lg i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 0 0 2px rgb(0 0 0 / .12); flex: none; }
.map-legend .lg b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-legend .lg-note { font: italic 14.5px var(--f-body); color: var(--muted); flex-basis: 100%; }
.mapbox canvas:focus-visible { outline: 2px solid #66afe9; outline-offset: -2px; }
.mapbox { position: relative; height: clamp(340px, 58vh, 540px); background: var(--sea); overflow: hidden; touch-action: none; cursor: grab; }
.mapbox.drag { cursor: grabbing; }
.mapbox canvas { display: block; width: 100%; height: 100%; }
.mapctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mapctl button { width: 32px; height: 32px; border: 1px solid #b9c0cc; background: var(--white); color: var(--blue); cursor: pointer; font: 600 17px/1 var(--f-head); display: grid; place-items: center; padding: 0; }
.mapctl button:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.mapctl button[disabled] { opacity: .4; cursor: default; background: var(--white); color: var(--blue); border-color: #b9c0cc; }
.map-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: calc(100% - 110px); padding: 7px 14px; background: rgb(34 56 135 / .94); color: var(--white); font: 13px/1.35 var(--f-head); text-align: center; pointer-events: none; z-index: 2; }
.panel-count { display: none; margin: -4px 0 14px; font: 14px var(--f-head); color: var(--muted); }
.panel-count b { color: var(--blue); font-weight: 600; font-size: 17px; }
.tip { position: absolute; pointer-events: none; background: var(--text); color: var(--white); padding: 6px 9px; font: 12.5px/1.35 var(--f-head); max-width: 260px; z-index: 2; }
.tip .d { opacity: .78; font-weight: 400; }
.infocard { position: absolute; left: 12px; bottom: 12px; width: min(350px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: var(--white); border: 1px solid var(--line); border-top: 5.6px solid var(--blue); padding: 14px 16px 12px; box-shadow: 0 6px 18px rgb(0 0 0 / .18); cursor: default; z-index: 3; }
.infocard h3 { font-size: 20px; margin: 0 26px 4px 0; }
.infocard .it { font-style: italic; margin: 0 0 6px; font-size: 16px; }
.infocard .x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.infocard ul { list-style: none; margin: 6px 0 0; padding: 0; }
.infocard li { padding: 7px 0; border-top: 1px solid var(--line); font: 14px/1.35 var(--f-head); }
.infocard li span { display: block; font: italic 14.5px var(--f-body); color: var(--muted); }
.map-note { font-size: 15.5px; font-style: italic; color: var(--muted); margin: 10px 0 0; }
.map-note i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 0; vertical-align: 0; }

/* full-screen map: the stage covers the window, the filter block becomes a slide-in panel */
body.map-full .map-stage { position: fixed; inset: 0; z-index: 50; border: 0; }
body.map-full .stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--blue); color: var(--white);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); }
.stage-title { font: 18px var(--f-body); }
.stage-count { font: 13px var(--f-head); opacity: .9; margin-right: auto; }
body.map-full .mapbox { flex: 1; height: auto; min-height: 0; }
body.map-full #fsBtn { display: none; }
body.map-full .infocard { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }

/* slide-in filter panel (full-screen map, and narrow screens) */
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 60; }
body.map-full .filter-block { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 92vw); z-index: 70; background: var(--white); overflow: auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 18px;
  box-shadow: -8px 0 28px rgb(0 0 0 / .22); transform: translateX(105%); transition: transform .2s ease; visibility: hidden; }
body.map-full.filters-open .filter-block { transform: none; visibility: visible; }
body.map-full .panel-close { display: block; }
body.map-full .panel-count { display: block; }
/* with room to spare, the panel is docked beside the full-screen map instead of covering it */
@media (min-width: 1025px) {
  body.map-full.filters-open .map-stage { right: 340px; }
  body.map-full .filter-block { width: 340px; box-shadow: none; border-left: 1px solid var(--line); transition: none; }
  body.map-full .scrim { display: none !important; }
}

/* ---------- lists (people-list pattern) ---------- */
.wreck-row { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 4px dotted var(--dots); }
.wreck-row h3 { font-size: 22px; margin-bottom: 5px; }
.wreck-row .it { font-style: italic; margin: 0 0 6px; }
.wreck-row p { margin: 0 0 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags span { font: 500 11px/1 var(--f-head); letter-spacing: .5px; text-transform: uppercase; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tags span.a { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---------- tables (course-list pattern) ---------- */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: 16px; }
.table th, .table td { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.table thead th { border-bottom-width: 2px; font-weight: 700; white-space: nowrap; padding: 0; }
.table thead th > span, .table thead th > button { display: block; padding: 8px; }
.table thead th button { all: unset; display: block; padding: 8px; cursor: pointer; font-weight: 700; width: 100%; box-sizing: border-box; }
.table thead th button:hover { color: var(--blue); }
.table thead th button:focus-visible { outline: 2px solid #66afe9; outline-offset: -2px; }
.table thead th[aria-sort] button { color: var(--blue); }
.table thead th[aria-sort="ascending"] button::after { content: " \25B2"; font-size: 10px; }
.table thead th[aria-sort="descending"] button::after { content: " \25BC"; font-size: 10px; }
.table tbody tr:nth-child(odd) { background: var(--stripe); }
.table.hover tbody tr { cursor: pointer; }
.table.hover tbody tr:hover { background: #f0f2f8; }
.table td.r, .table th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.nw { white-space: nowrap; }
.table td small { display: block; font-size: 14.5px; font-style: italic; color: var(--muted); }
.table td.wrap { overflow-wrap: anywhere; }
.table.kv th { width: 170px; font-weight: 700; padding: 8px; white-space: normal; }
.table .barcell { min-width: 120px; }
.table .barcell i { display: block; height: 10px; background: var(--blue); min-width: 1px; }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.table-tools .note { font-style: italic; color: var(--muted); font-size: 15.5px; margin-right: auto; }
.empty { padding: 28px 12px; text-align: center; font-style: italic; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; margin: 22px 0 0; }
.pager button { min-width: 38px; height: 36px; padding: 0 10px; margin-left: -1px; border: 1px solid var(--line); background: var(--white); color: var(--link); font: 14px var(--f-head); cursor: pointer; }
.pager button:hover { background: var(--crumb); }
.pager button.cur { background: var(--blue); border-color: var(--blue); color: var(--white); cursor: default; position: relative; }
.pager button[disabled] { color: #aaa; cursor: default; background: var(--white); }
.pager span { align-self: center; padding: 0 8px; color: var(--muted); }

/* ---------- working layout: less chrome, denser data ----------
   The department template spends a lot of height on the header, title and breadcrumb, and sets tables in large
   type with generous padding. For reading and comparing records, these rules pull the content up, keep the
   filters in view while a long table scrolls, and tighten the register. */
.main-nav a { font-size: 17px; padding: 9px 13px; }
.page-header { font-size: 30px; padding-bottom: 14px; margin-bottom: 12px; }
.breadcrumb { font-size: 15.5px; padding: 6px 13px; margin-bottom: 16px; }
@media (min-width: 1025px) {
  body:not(.map-full) .col-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; }
}
.table.dense { font-size: 15px; line-height: 1.3; }
.table.dense td { padding: 5px 8px; }
.table.dense thead th > span, .table.dense thead th button { padding: 6px 8px; }
.table.dense td small { display: inline; font-size: 13.5px; margin-left: 7px; } /* site and region sit on the same line: one row, one line where the screen allows */
.table-tools .tool { display: inline-flex; align-items: center; gap: 7px; font: 13px var(--f-head); }
.table-tools select { font: 13px var(--f-head); height: 30px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 4px; background: var(--white); color: var(--text); }
.more { margin: 0 0 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.more > summary { cursor: pointer; font: 600 12.5px/1.2 var(--f-head); letter-spacing: .65px; text-transform: uppercase; color: var(--blue); padding: 4px 0 10px; }
.cite { border: 1px solid var(--line); border-top: 5.6px solid var(--blue); background: var(--soft); padding: 14px 16px 12px; max-width: 78ch; }
.cite #citeText { margin: 0 0 12px; overflow-wrap: anywhere; }
.cite .help { margin-top: 10px; }

/* ---------- adaptive behaviour ----------
   The page adapts to what is actually available rather than to a list of devices: the register reacts to the width
   of its own box, controls grow where the pointer is a finger, the map uses the height of the screen, and paper
   gets its own sheet. (The rail turns into a slide-in panel at 1024 px; see "narrow screens" at the end.) */

/* the register: columns drop out as its box narrows, and below 520 px each wreck becomes a short labelled card */
.reg-wrap { container-type: inline-size; }
.unit { display: none; }
@container (max-width: 860px) { .c-parker, .c-sea { display: none; } }
@container (max-width: 640px) { .c-amph { display: none; } }
@container (max-width: 520px) {
  #reg, #reg tbody, #reg tr, #reg td { display: block; }
  #reg { border: 0; }
  #reg thead { display: none; }
  #reg tbody tr { padding: 10px 12px 11px; border: 1px solid var(--line); border-top: 0; }
  #reg tbody tr:first-child { border-top: 1px solid var(--line); }
  #reg td { border: 0; padding: 1px 0; text-align: left; white-space: normal; }
  #reg td.nm { font-size: 16.5px; padding-bottom: 3px; }
  #reg td[data-l]::before { content: attr(data-l) ": "; font: 12.5px var(--f-head); color: var(--muted); }
  #reg td.c-sea, #reg td.c-amph, #reg td.c-parker { display: block; } /* a card has room for every field */
  #reg td.nil { display: none; }
  .unit { display: inline; }
}

/* the map uses the screen's height: taller on large screens, and nearly all of a phone held sideways */
.mapbox { height: clamp(300px, 58vh, 540px); height: clamp(300px, 58dvh, 540px); }
@media (min-width: 1025px) { .mapbox { height: clamp(380px, 66vh, 760px); height: clamp(380px, 66dvh, 760px); } }
@media (max-height: 520px) and (orientation: landscape) { .mapbox { height: max(230px, calc(100vh - 20px)); height: max(230px, calc(100dvh - 20px)); } }

/* fingers: targets of about 44 px, and 16 px text in fields (smaller text makes phones zoom the page on focus) */
@media (pointer: coarse) {
  .mapctl { gap: 6px; }
  .mapctl button { width: 44px; height: 44px; }
  .form-control, .site-search input { height: 44px; font-size: 16px; }
  .site-search button { width: 44px; height: 42px; }
  .sq-list { top: 46px; }
  .msel > summary::after { top: 15px; }
  .msel-list { top: 47px; }
  .opt { padding-block: 8px; font-size: 16px; }
  .opt input { width: 19px; height: 19px; }
  .checks .opt { padding-block: 6px; }
  .btn.sm { padding: 12px 14px; }
  .chip { padding: 8px 8px 8px 12px; font-size: 14px; }
  .chip i { width: 22px; height: 22px; }
  .pager button { min-width: 44px; height: 44px; }
  .layers select, .table-tools select { height: 42px; font-size: 15px; }
  .pop-panel { gap: 2px; }
  .pop-panel label { padding-block: 9px; }
  .section-nav a, .section-nav .side-link { padding-block: 16px 13px; }
  .sq-item { padding-block: 12px; }
  .cta { padding-block: 8px; }
  .panel-close { width: 44px; height: 44px; }
  .infocard .x { width: 44px; height: 44px; right: 2px; top: 2px; }
  .infocard li { padding-block: 11px; }
  .main-nav a { padding-block: 12px; }
}

/* small screens: a bar at the bottom keeps the count and the filters in reach once the result bar has scrolled away */
.dock { display: none; }
@media (max-width: 1024px) {
  body.dock-on .dock { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--white);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgb(0 0 0 / .1);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .dock .count { margin-right: auto; font: 14px var(--f-head); color: var(--muted); }
  .dock .count b { color: var(--blue); font-weight: 600; font-size: 17px; }
  body.dock-on { padding-bottom: 62px; }
  body.dock-on .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.map-full .dock, body.filters-open .dock { display: none; }
}

/* readers who ask for more contrast */
@media (prefers-contrast: more) {
  :root { --muted: #45454d; --line: #8f8f8f; --rule: #7d7d7d; --dots: #8d949b; --dot-off: #8d97ab; }
  .form-control { border-color: #555; }
}

/* paper: the record or the table itself, without navigation, filters or buttons */
@media print {
  .site-header { background: none; color: #000; padding: 0 0 6pt; border-bottom: 1pt solid #000; }
  .brand { color: #000; padding: 0; }
  .brand svg, .main-nav, .site-search, #side, .site-footer, .copy-bar, .dock, .toast, .scrim, .skip, .btn, .cta, .pager, .rec-nav, .layers, .mapctl,
  .map-hint, .breadcrumb, .result-bar .chips, .table-tools, #preview, #previewTitle, #previewNote, #seeAll { display: none !important; }
  .page { padding-block: 10pt 0; }
  .row { display: block; }
  .container { max-width: none; padding: 0; }
  body { font-size: 11pt; padding: 0 !important; }
  .page-header { font-size: 20pt; }
  a { color: inherit; text-decoration: none; }
  .table { font-size: 10pt; }
  .table tbody tr { break-inside: avoid; }
  h2.sub { break-after: avoid; }
  .tablewrap { overflow: visible; }
  .cite { background: none; }
}

/* ---------- header search ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 26px; }
.site-search { position: relative; flex: 0 1 320px; min-width: 0; margin: 6px 0; }
.site-search input { width: 100%; height: 38px; padding: 6px 42px 6px 13px; font: 14px var(--f-head); color: var(--white); background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .6); border-radius: 0; }
.site-search input::placeholder { color: rgb(255 255 255 / .85); }
.site-search input:focus { background: var(--white); color: var(--text); outline: 2px solid #66afe9; outline-offset: 0; }
.site-search input:focus::placeholder { color: #8a8a94; }
.site-search input::-webkit-search-cancel-button { display: none; }
.site-search button { position: absolute; right: 1px; top: 1px; width: 38px; height: 36px; border: 0; background: none; color: var(--white); cursor: pointer; display: grid; place-items: center; }
.site-search input:focus + button { color: var(--blue); }
.sq-list { position: absolute; z-index: 45; left: 0; right: 0; top: 40px; max-height: min(70vh, 460px); overflow: auto; background: var(--white); color: var(--text); border: 1px solid #ccc; border-top: 5.6px solid var(--blue); box-shadow: 0 8px 22px rgb(0 0 0 / .22); }
.sq-group { font: 600 11px/1 var(--f-head); letter-spacing: .65px; text-transform: uppercase; color: var(--muted); padding: 11px 13px 5px; }
.sq-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 13px; cursor: pointer; }
.sq-item .m { font: 500 14.5px/1.3 var(--f-head); color: var(--link); min-width: 0; overflow-wrap: anywhere; }
.sq-item .n { font: italic 14px/1.3 var(--f-body); color: var(--muted); text-align: right; flex: none; max-width: 48%; }
.sq-item:hover, .sq-item.on { background: #eef1f8; }
.sq-item.on .m { text-decoration: underline; }

/* ---------- Layers menu and other pop-up panels ---------- */
.pop { position: relative; }
.pop > summary { list-style: none; -webkit-user-select: none; user-select: none; }
.pop > summary::-webkit-details-marker { display: none; }
.pop[open] > summary { background: var(--blue); color: var(--white); }
.pop-panel { position: absolute; z-index: 30; left: 0; top: calc(100% + 5px); min-width: 252px; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; background: var(--white); border: 1px solid #ccc; border-top: 5.6px solid var(--blue); box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.sw-names { width: auto; height: auto; font: italic 12px/1 var(--f-body); color: #4e6e92; }

/* ---------- landing page ---------- */
.home-hero { position: relative; height: clamp(210px, 36vh, 380px); background: var(--sea); overflow: hidden; }
.home-hero canvas { display: block; width: 100%; height: 100%; }
.hero-in { position: absolute; inset: auto 0 96px 0; display: flex; justify-content: flex-end; pointer-events: none; }
.hero-in .btn { pointer-events: auto; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
body.home .page { padding-top: 0; }
body.home .row { grid-template-columns: minmax(0, 1fr); }
.home-card { position: relative; z-index: 1; margin: -72px 0 0; padding: 34px clamp(18px, 4vw, 44px) 38px; background: var(--white); }
.home-title { font-size: 36px; margin-bottom: 14px; }
.home-card .lead { max-width: 70ch; margin-bottom: 34px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px clamp(18px, 3vw, 40px); }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); }
.tile:hover { text-decoration: none; }
.tile h2 { font-size: 23px; color: var(--link); margin: 18px 0 8px; }
.tile:hover h2 { text-decoration: underline; }
.tile p { margin: 0 0 12px; max-width: 30ch; }
.tile .cta { margin-top: auto; }
.circle { width: min(200px, 62vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--blue); color: var(--white); box-shadow: 0 0 0 0 var(--dots); transition: box-shadow .15s ease; }
.tile:hover .circle, .tile:focus-visible .circle { box-shadow: 0 0 0 7px var(--dots); }
.circle canvas { display: block; width: 100%; height: 100%; }
.circle.c-num { grid-auto-flow: row; align-content: center; gap: 4px; }
.circle.c-num b { font: 600 46px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.circle.c-num i { font: italic 19px/1 var(--f-body); }
.circle.c-hist svg { width: 74%; fill: var(--white); margin-top: 8%; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; margin-top: 8px; padding: 0 clamp(18px, 4vw, 44px); }
.home-cols h2.sub { margin-top: 0; }
.howto { margin: 0; padding-left: 22px; }
.howto li { margin-bottom: 10px; max-width: 66ch; }
.facts dl { margin: 0 0 4px; }
.facts dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #c3c3c3; }
.facts dt { font: 600 19px/1.1 var(--f-head); color: var(--blue); font-variant-numeric: tabular-nums; }
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.3; }

/* ---------- timeline ---------- */
.hist { display: block; width: 100%; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.hist.big { height: 284px; border: 1px solid var(--line); background: var(--white); }
.hist.mini { height: 84px; border: 1px solid #ccc; border-radius: 4px; background: var(--white); }
.tl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; }
.tl-row .readout { font: 600 18px var(--f-head); color: var(--text); }
.tl-row .readout.on { color: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 13px var(--f-head); margin: 0 0 8px; }
.legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }

/* ---------- record page ---------- */
.ids { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.ids span { font: 12.5px var(--f-head); padding: 4px 8px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.ids span b { color: var(--text); font-weight: 600; }
.datebar { position: relative; height: 22px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.datebar i { position: absolute; top: 4px; bottom: 4px; background: var(--blue); min-width: 3px; }
.datebar .t { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.datebar-ax { display: flex; justify-content: space-between; font: 11.5px var(--f-head); color: var(--muted); margin: 3px 0 18px; }
.prose p { max-width: 68ch; overflow-wrap: anywhere; white-space: pre-line; }
.rec-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin: 30px 0 0; padding-top: 18px; border-top: 4px dotted var(--dots); }
.rec-nav .mid { margin: 0 auto; font: 13px var(--f-head); color: var(--muted); }
.linkish { all: unset; color: var(--link); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.linkish:focus-visible { outline: 2px solid #66afe9; }

/* ---------- about ---------- */
.about h2 { font-size: 26px; margin: 30px 0 12px; }
.about h2:first-child { margin-top: 0; }
.about p, .about li { max-width: 68ch; }
.about ul { padding-left: 22px; margin: 0 0 14px; }
.about li { margin-bottom: 6px; }
.lead { font-size: 19px; max-width: 66ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--blue); color: var(--white); padding-block: 36px; font-size: 15.5px; line-height: 1.45; }
.foot-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; }
.foot-grid > div { padding: 2px 24px; border-left: 1px solid rgb(255 255 255 / .4); min-width: 0; }
.foot-grid > div:first-child { border-left: 0; padding-left: 0; }
.foot-brand { font: 22px/1.2 var(--f-body); margin-bottom: 12px; }
.site-footer .it { font-style: italic; }
.site-footer p { margin: 0 0 10px; }
.site-footer a { color: var(--white); text-decoration: underline; }
.foot-title { font: 600 13px/1.1 var(--f-head); letter-spacing: .65px; text-transform: uppercase; margin-bottom: 12px; }
.quick { list-style: none; margin: 0 0 16px; padding: 0; }
.quick a { display: inline-flex; align-items: center; gap: 9px; font: 700 13px/1.45 var(--f-head); text-decoration: none; padding: 4px 0; }
.quick a::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.quick a:hover { text-decoration: underline; }
.site-footer .btn.on-blue { font-style: italic; font-size: 14px; }
.copy-bar { background: var(--bar); color: #e0e1e3; font: 12px/1.6 var(--f-head); letter-spacing: .5px; text-transform: uppercase; padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.copy-bar .container { display: flex; flex-wrap: wrap; gap: 4px 22px; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--text); color: var(--white); padding: 10px 16px; font: 13.5px var(--f-head); z-index: 90; max-width: calc(100% - 32px); }
.csvbox { width: 100%; height: 150px; font: 12px/1.4 ui-monospace, Consolas, monospace; border: 1px solid #ccc; border-radius: 4px; padding: 8px; margin: 8px 0 16px; }

/* ---------- narrow screens ---------- */
@media (max-width: 1024px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-header { font-size: 28px; padding-bottom: 16px; }
  .main-nav a { font-size: 15.5px; padding: 8px 9px; }
  .nav-long { display: none; } /* the four tabs then fit on one line */
  .brand { padding: 9px 0 5px; }
  .site-header { padding-block: 4px 6px; }
  #openFilters { display: inline-flex; }
  .filter-block { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 92vw); z-index: 70; background: var(--white); overflow: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 18px;
    box-shadow: -8px 0 28px rgb(0 0 0 / .22); transform: translateX(105%); transition: transform .2s ease; visibility: hidden; }
  body.filters-open .filter-block { transform: none; visibility: visible; }
  .panel-close { display: block; }
  .panel-count { display: block; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .foot-grid > div { border-left: 0; padding: 0; }
  .table.kv th { width: 118px; }
  .site-search { flex: 1 1 100%; margin: 2px 0 0; order: 3; }
  .home-title { font-size: 28px; }
  .home-card { margin-top: -44px; padding-top: 24px; }
  .hero-in { bottom: 62px; }
  .tiles { gap: 34px 20px; }
  .home-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .filter-block { transition: none !important; } .circle { transition: none; } }