/* Archive and article rules are only needed outside the orbital atlas. */
.page-intro { display: grid; align-items: center; grid-template-columns: 1fr minmax(180px,36%); gap: 36px; margin: 18px 0 42px; }
.page-intro h1, .about-page h1, .missing h1 { font-size: clamp(40px,5.3vw,83px); letter-spacing: -.065em; line-height: 1.15; }
.archive-count { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 14px; }
.archive-count b { font: 600 14px var(--mono); color: var(--reef); }
.water-strip { border-inline-start: 3px solid var(--tide); }
.water-strip img { width: 100%; height: clamp(98px,11vw,180px); object-fit: cover; }
.archive-filters { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.search-field { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; padding-left: 12px; background: var(--white); border: 1px solid var(--line); }
.search-field .icon { width: 17px; height: 17px; }
.archive-filters input { width: 100%; min-height: 43px; padding: 7px 10px 7px 2px; border: 0; background: none; font-size: 14px; }
.archive-filters select { border: 1px solid var(--line); height: 100%; min-height: 43px; padding: 5px 10px; font-size: 14px; background: var(--white); }
.year-group h2 { color: var(--reef); font: 600 24px/1.2 var(--mono); padding-top: 22px; }
.no-results { padding: 45px 15px; text-align: center; }
.about-page { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(36px,6vw,105px); align-items: center; min-height: min(74vh,760px); }
.site-facts { margin-top: 35px; border-top: 1px solid var(--line); }
.site-facts > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.site-facts dt { color: var(--muted); }
.site-facts dd { overflow-wrap: anywhere; }
.site-facts .icon { width: 15px; height: 15px; vertical-align: middle; }
.water-window { min-width: 0; }
.water-window img { width: 100%; height: clamp(220px,26vw,425px); object-fit: cover; border-radius: 46% 54% 63% 37% / 61% 36% 64% 39%; }
.water-window figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.missing { min-height: min(72vh,700px); display: grid; align-items: center; grid-template-columns: 1fr minmax(180px,38%); gap: 40px; }
.missing img { width: 100%; height: clamp(145px,20vw,300px); object-fit: cover; }

.reading { padding: clamp(32px,4vw,75px) var(--gutter) 65px; max-width: 1280px; margin-inline: auto; }
.reading-head { max-width: 54rem; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.reading-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--reef); align-items: center; margin: 22px 0 12px; font-size: 12px; }
.reading-head h1 { font-size: clamp(32px,3.7vw,61px); line-height: 1.23; letter-spacing: -.045em; }
.lede { font-size: clamp(16px,1.4vw,20px); margin-top: 16px; line-height: 1.75; color: var(--muted); }
.preview-note { display: inline-block; margin-left: 18px; padding: 3px 9px; border: 1px solid var(--reef); color: var(--reef); font-size: 12px; }
.reading-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,210px); gap: clamp(28px,4vw,70px); margin-top: 30px; }
.reading-grid:has(.prose:only-child) { grid-template-columns: minmax(0,52rem); }
.prose { grid-area: 1 / 1; min-width: 0; font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.05em; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.7em; line-height: 1.45; }
.prose h2 { font-size: 1.65em; }
.prose .heading-anchor, .prose .heading-link { font: 15px var(--mono); margin-left: .45em; opacity: .65; }
.prose a { color: var(--reef); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin-inline: 0; padding: 12px 20px; border-left: 3px solid var(--tide); background: var(--foam); }
.prose pre { overflow: auto; padding: 14px 20px; margin: 0; color: var(--ink); background: #f5fafc; font: 14px/1.65 var(--mono); }
.prose code { font-family: var(--mono); }
.prose :not(pre) > code { font-size: .89em; padding: 1px 4px; background: var(--foam); }
.code-toolbar { display: flex; justify-content: space-between; align-items: center; background: #eaf5fa; color: var(--ink); padding: 7px 14px; border-bottom: 1px solid #cedfe6; font: 12px var(--mono); }
.code-toolbar button { padding: 6px 8px; color: var(--reef); }
.table-wrap { overflow: auto; }
.prose table { border-collapse: collapse; min-width: 60%; font-size: 15px; }
.prose th, .prose td { text-align: start; padding: 6px 12px; border: 1px solid var(--line); }
.prose th { background: var(--foam); }
.contents { grid-area: 1 / 2; align-self: start; position: sticky; top: 18px; border-top: 2px solid var(--reef); padding-top: 7px; max-height: 76vh; overflow: auto; }
.contents summary { cursor: pointer; font-weight: 650; font-size: 14px; padding-block: 6px; }
.contents summary .icon { width: 16px; height: 16px; margin: 0 7px 0 3px; vertical-align: middle; }
.contents ol { padding: 0; margin: 9px 0 0; list-style: none; }
.contents li a { display: block; padding: 5px 8px; border-left: 2px solid var(--line); color: var(--muted); font-size: 13px; }
.contents .level-3 { margin-left: 10px; }
.contents .level-4 { margin-left: 18px; }
.contents a[aria-current] { border-color: var(--reef); color: var(--reef); font-weight: 650; }
.reading-progress { position: fixed; z-index: 12; inset: 0 0 auto var(--rail); width: calc(100% - var(--rail)); height: 3px; border: 0; appearance: none; background: transparent; color: var(--tide); }
.reading-progress::-webkit-progress-bar { background: transparent; }
.reading-progress::-webkit-progress-value { background: var(--tide); }
.reading-progress::-moz-progress-bar { background: var(--tide); }
.adjacent { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 18px; }
.adjacent a { display: grid; gap: 3px; max-width: 42ch; }
.adjacent small { color: var(--muted); }
@media (max-width:760px) {
  .page-intro { margin: 3px 0 25px; gap: 20px; grid-template-columns: 1fr 28%; }
  .page-intro .kicker, .about-copy .kicker { margin-bottom: 12px; }
  .water-strip img { height: 95px; }
  .archive-filters { gap: 7px; }
  .search-field { flex-basis: 100%; }
  .about-page, .missing { grid-template-columns: 1fr; gap: 28px; min-height: auto; }
  .water-window { max-width: 480px; justify-self: center; }
  .water-window img { height: auto; }
  .reading-grid { display: flex; flex-direction: column; gap: 16px; }
  .contents { width: 100%; position: static; max-height: none; }
  .prose { font-size: 16px; }
  .reading { padding-top: 22px; }
  .reading-head { padding-bottom: 20px; }
}

.archive-quiet { display: block; }
.empty-basin { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(245px,24vw,365px); overflow: hidden; background: var(--foam); border-block: 1px solid var(--line); }
.empty-basin > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; mask-image: linear-gradient(95deg,transparent 10%,rgba(0,0,0,.35) 35%,black 65%); }
.basin-copy { padding: 33px clamp(20px,3.5vw,55px); }
.basin-copy > .icon { width: 28px; height: 28px; color: var(--reef); }
.basin-copy p { margin-top: 10px; font-size: clamp(21px,2vw,34px); letter-spacing: -.04em; font-weight: 620; }
.basin-copy .text-link { margin-top: 11px; }
.reading-head { position: relative; padding-bottom: 44px; }
.reading-head::after { position: absolute; content: ""; height: 13px; inset: auto 0 0; background: var(--foam) url("/assets/chart/contours.svg") center 52% / cover; }
@media (max-width: 760px) {
  .empty-basin { min-height: 210px; }
  .empty-basin > img { mask-image: linear-gradient(100deg,transparent 0%,rgba(0,0,0,.22) 32%,black 94%); }
}

/* Sea-glass instruments sit on an uninterrupted chart. */
:root {
  --rail: 64px;
  --navy: #234757;
  --sea-ink: #254857;
  --petrol: #106783;
  --surface: #ffffff;
  --sea-line: #bdcfd8;
  --panel-rim: #b3cbd5;
  --accent: #0089ad;
  --panel-shadow: 0 1px 2px #164b6410, 0 5px 18px #24627a15;
}
.mast { min-height:54px; gap:12px; padding:0 24px; background:#ffffff; }
.wordmark {display:inline-flex;align-items:center;gap:9px;color:#355968;font:600 15px/1 var(--sans);letter-spacing:.035em;}

.rail {background:#f8fcfe; border:0; border-right:1px solid #d6e5eb; color:#375c69;}

.rail-brand {height:54px;background:#f7fcfe;border-bottom:1px solid #d5e5ec;}
.rail-nav {gap:6px;margin-top:22px;}
.rail-link {font-size:11px;min-height:58px;gap:3px;color:#355e6f;}
.rail-link .icon {width:22px;height:22px;}
.rail-link[aria-current] {color:#075d7a;background:#e2f4fa;}
.rail-link[aria-current]::before {background:var(--accent);}
.rail-link:hover,.rail-top:hover {background:#e7f5fa;color:#16596e;}
.rail-top {color:#4d7787;border-color:#c6dce5;}
.page-home main {max-width:none;display:flex;flex-direction:column;}
.page-home .workspace {margin:0;}
.page-home .mast {position:absolute;z-index:10;top:15px;inset-inline:19px;padding:0;min-height:0;pointer-events:none;background:none;border:none;}
.page-home .mast > * {pointer-events:auto;}
.page-home .wordmark,.page-home .languages,.layer-trigger {
  min-height:37px;background:#ffffffed;border:1px solid #bbd1da;border-radius:22px;
  box-shadow:inset 0 1px #fff,0 2px 6px #30739116;backdrop-filter:blur(10px);
}
.page-home .wordmark {padding:0 14px 0 11px;font-size:14px;}
.page-home .languages {padding:2px 5px 2px 11px;}
.page-home .languages a,.page-home .lang-current {min-height:28px;min-width:30px;border-radius:16px;}
.page-home .lang-current {background:#dcf3fa;color:#185b72;}
.page-home .site-footer {min-height:30px;padding:4px 20px;font-size:11px;background:#fff;}
.footer-brand img {width:25px;}
@media(min-width:761px) {
  .page-home .rail {inset:50% auto auto 13px;transform:translateY(-50%);width:50px;padding:4px;background:#fffffff5;border:1px solid #b9d1dc;border-radius:9px;box-shadow:var(--panel-shadow);}
  .page-home .rail-brand,.page-home .rail-top {display:none;}
  .page-home .rail-nav {gap:4px;margin:0;}
  .page-home .rail-link {border-radius:5px;min-height:51px;font-size:10px;}
  .page-home .rail-link[aria-current] {background:#d5f1fb;color:#0d5974;box-shadow:inset 0 1px #fff;}
  .page-home .rail-link[aria-current]::before {display:none;}
}
.atlas {position:relative;isolation:isolate;display:block;height:calc(100svh - 30px);min-height:470px;overflow:hidden;background:#c6eaf4;color:var(--sea-ink);}
.atlas:fullscreen {width:100vw;height:100dvh;min-height:0;}
.atlas-surface {position:absolute;inset:0 0 29px;overflow:hidden;touch-action:none;user-select:none;cursor:grab;container-type:size;}
.atlas-surface:focus-visible {outline-offset:-5px;}
.atlas-surface.moving {cursor:grabbing;}
.atlas-plane {position:absolute;left:0;top:0;width:max(112cqw,179.2cqh);height:max(112cqh,70cqw);transform:translate(calc(50cqw - 50%),calc(50cqh - 50%));transform-origin:0 0;}
.terrain,.map-overlay,.geo-grid,.place-names,.stations,.course-lines {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.terrain,.map-overlay {user-select:none;-webkit-user-drag:none;}
.geo-grid {background-image:linear-gradient(90deg,#43819e12 1px,transparent 1px),linear-gradient(#43819e12 1px,transparent 1px);background-size:8.33333% 10%;}
.geo-grid::after {content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#45899d42 1.2px,transparent 1.4px);background-size:8.33333% 10%;}
.place-names i {position:absolute;color:#3c7586;font:650 clamp(15px,1.7vw,26px)/1.2 var(--sans);letter-spacing:.19em;transform:rotate(-12deg);text-shadow:0 1px #fff,1px 0 #f5ffff;}
.place-names i:first-child{left:24%;top:18%}.place-names i:nth-child(2){left:50%;top:48%;color:#4f8697}.place-names i:last-child{left:80%;top:79%}
.light-sectors path:first-child {fill:#fff0ab;fill-opacity:.29;stroke:#b7a978;stroke-width:.8;}
.light-sectors path+path {fill:none;stroke:#9a8852;stroke-width:1;stroke-dasharray:2 4;}
.channel {fill:none;stroke:#497f92;stroke-width:1.7;stroke-dasharray:9 4 2 4;}
.course-fixes {fill:#fff7d6;stroke:#648c98;stroke-width:1.3;}
.chart-index,.layer-list,.overview,.shoal-detail,.chart-zoom {border:1px solid var(--panel-rim);background:var(--surface);box-shadow:var(--panel-shadow);border-radius:10px;}
.chart-index {position:absolute;top:13px;left:158px;width:262px;z-index:4;}
.chart-index summary {position:relative;isolation:isolate;overflow:hidden;list-style:none;display:flex;align-items:center;gap:12px;min-height:39px;padding:7px 11px;color:#284e60;background:#fff;border-radius:6px;cursor:pointer;border-bottom:1px solid #dce9ee;}
.chart-index summary::before {content:"";position:absolute;z-index:-1;inset:0 0 0 65%;background:url("/assets/chart/contours.svg?v=quay-2") 65% 55% / 360px auto;opacity:.16;}
.chart-index[open] summary {border-radius:6px 6px 0 0;}
.chart-index summary::-webkit-details-marker {display:none;}
.index-rose {width:24px;height:24px;display:grid;place-items:center;color:#087394;border:1px solid #b3d9e8;border-radius:50%;background:#eaf8fc;}
.index-rose .icon {width:17px;height:17px;}
.chart-index summary strong {font-size:14px;letter-spacing:.025em;line-height:1.4;font-weight:660;}
.fold {width:8px;height:8px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);margin-left:auto;}
.chart-index[open] .fold {transform:rotate(225deg);}
.index-body {padding:13px 13px 6px;max-height:calc(100svh - 219px);overflow-y:auto;}
.lookup {display:flex;align-items:center;gap:7px;padding:0 9px;background:#f6fbfd;border:1px solid #bed2dc;box-shadow:inset 0 1px 2px #4a799008;border-radius:5px;}
.lookup .icon {width:16px;height:16px;color:#437282;}
.lookup:focus-within {outline:2px solid var(--reef);outline-offset:1px;}
.lookup input {width:100%;min-width:0;height:35px;padding:0;border:0;background:transparent;font-size:13px;outline:none;}
.lookup kbd {font:11px/1.4 var(--mono);border:1px solid #c8dbe2;border-radius:3px;padding:0 5px;color:#536e7a;}
.index-label {display:flex;align-items:center;gap:9px;margin:12px 0 5px;font:650 11px/1.5 var(--sans);color:#496874;letter-spacing:.08em;}
.index-label::after {content:"";height:1px;flex:1;order:1;background:#dde8ed;}
.index-label span {order:2;color:#38606f;font:11px var(--mono);letter-spacing:.02em;}
.index-place,.index-note {width:100%;display:flex;align-items:center;gap:9px;min-height:39px;padding:4px 5px;text-align:left;font-size:13px;line-height:1.45;border-bottom:1px solid #e2ebef;}
.index-place .icon:first-child {width:26px;height:26px;padding:3px;color:#24697e;background:#e9f6fa;border:1px solid #c6e0e9;border-radius:4px;}
.index-place[data-entry=light] .icon:first-child,.index-place[data-entry=buoy] .icon:first-child {background:#fff4e6;color:#7a533f;border-color:#ebd6bc;}
.index-place .icon:last-child,.index-note .icon {width:13px;height:13px;margin-left:auto;color:#5c7783;}
.index-place:hover,.index-note:hover,.find-place:hover,.index-place[data-selected] {background:#eaf7fb;}
.index-place[data-selected]{box-shadow:inset 3px 0 var(--petrol);}
.site-entry {display:flex;align-items:stretch;}.site-entry .index-place {min-width:0;}
.find-place {align-self:center;display:grid;place-items:center;min-width:30px;height:30px;border-left:1px solid #dce7ec;}
.find-place .icon {width:15px;height:15px;}
.index-notes {padding:0 0 9px;}.index-notes [data-empty-notes],[data-no-places] {font-size:12px;color:#52707b;margin:5px 0 2px;}
.chart-tools-v2 {position:absolute;right:137px;top:15px;z-index:6;}
.layer-trigger {display:flex;align-items:center;gap:7px;padding:0 12px;font-size:13px;font-weight:620;color:var(--sea-ink);}
.layer-trigger .icon {width:18px;height:18px;}
.layer-trigger[aria-expanded=true]{color:#126079;background:#daf2fa;}
.chart-zoom {position:absolute;top:47%;right:17px;transform:translateY(-50%);display:grid;justify-items:center;width:38px;padding:3px;background:#ffffffed;color:#315a6b;border-color:#b3cbd5;}
.chart-zoom button {display:grid;place-items:center;width:100%;height:32px;color:inherit;border-radius:4px;}
.chart-zoom button:hover:enabled {background:#e1f3fa;color:#11647c;}
.chart-zoom .icon {width:18px;height:18px;}
.chart-zoom output {font:10px/16px var(--mono);color:#176682;}
.chart-zoom [data-reset],.chart-zoom [data-full] {border-top:1px solid #dce7ed;}
.zoom-track {position:relative;display:grid;place-items:center;width:22px;height:76px;background:repeating-linear-gradient(0deg,transparent 0 6px,#a2bbc5 6px 7px,transparent 7px 8px) left center / 4px 90% no-repeat;}
.zoom-track input {appearance:none;writing-mode:vertical-lr;direction:rtl;width:6px;height:68px;margin:0;border-radius:3px;background:linear-gradient(to top,#55b9d6 var(--zoom-fill,0%),#d9e7ed var(--zoom-fill,0%));cursor:pointer;}
.zoom-track input::-webkit-slider-thumb {appearance:none;width:14px;height:7px;border:1px solid #40869b;border-radius:2px;background:#99daec;}
.zoom-track input::-moz-range-thumb {width:14px;height:7px;border:1px solid #40869b;border-radius:2px;background:#99daec;}
.chart-legend {position:absolute;left:20px;bottom:45px;display:flex;align-items:center;gap:7px;padding:5px 10px;color:#406270;background:#fffffff2;border:1px solid #b5cbd4;border-radius:4px;font:11px var(--sans);}
.chart-legend i {width:77px;height:7px;background:linear-gradient(90deg,#98d7eb 20%,#bbe8f2 20% 40%,#caeff4 40% 60%,#daf5f6 60% 80%,#f2fcfb 80%);}
.chart-legend small{font-size:10px;}.chart-legend span{font-weight:650;}
.overview {position:absolute;right:17px;bottom:44px;width:148px;padding:5px;background:#fff;}
.overview-head {display:flex;justify-content:space-between;font:10px/21px var(--mono);padding-inline:3px;}
.overview button {position:relative;display:block;width:100%;padding:0;cursor:crosshair;touch-action:none;overflow:hidden;border:1px solid #bdd5de;}
.overview img {width:100%;pointer-events:none;}
.overview i {position:absolute;border:1.5px solid #2583a2;background:#ecf3de26;box-shadow:0 0 0 150px #5184971c,inset 0 0 0 1px #fff;pointer-events:none;}
.chart-status {position:absolute;bottom:0;inset-inline:0;height:29px;display:flex;align-items:center;gap:18px;padding:0 17px;background:#f7fcfef5;color:#365969;font-size:11px;border-top:1px solid #bed8e3;}
.chart-status span {display:inline-flex;align-items:center;gap:6px;}
.chart-status .icon {width:14px;height:14px;}
.chart-coords {font:11px var(--mono);white-space:pre;}.gesture{margin-left:auto;opacity:.85;}
.map-scale i {height:5px;border:1px solid #6b929f;border-top:0;}
.map-scale small{font:10px var(--mono);}
.shoal-detail {position:absolute;right:74px;bottom:55px;width:220px;z-index:5;padding:10px 12px;}
.shoal-detail>div:first-child {display:flex;gap:7px;align-items:center;}
.shoal-detail strong {font-size:14px;}.shoal-detail p {font:11px/1.6 var(--mono);margin-top:6px;color:#4f6976;}
.shoal-detail button {margin-left:auto;display:grid;place-items:center;padding:4px;}
.shoal-detail .icon {width:17px;height:17px;}.detail-art,.shoal-detail [data-study] {width:100%;height:94px;object-fit:cover;margin-top:8px;border:1px solid #bdd2dc;}
.detail-open {display:inline-flex;align-items:center;gap:6px;font-weight:620;font-size:13px;color:#116a85;margin-top:4px;}
.atlas:has(.shoal-detail:not([hidden])) .overview {visibility:hidden;}
.atlas-plate {display:block;width:100%;height:100%;}
.page-notes .page-intro h1,.page-about .about-copy h1,.page-missing .missing h1 {font-size:clamp(32px,3.8vw,61px);font-weight:660;}
.empty-basin {grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);background:#fff;border:1px solid #ccdde4;border-radius:4px;min-height:245px;}
.empty-basin>.atlas-plate {grid-column:2;grid-row:1;align-self:stretch;min-height:245px;border-left:1px solid #cbdfe6;}
.basin-copy {grid-row:1;grid-column:1;color:var(--sea-ink);}
.basin-copy>.icon {padding:9px;border:1px solid #b8d5df;border-radius:7px;color:#1a7591;width:45px;height:45px;background:#e9f8fc;}
.inset-chart,.missing-plate,.water-strip {display:block;position:relative;isolation:isolate;width:100%;overflow:hidden;border:1px solid #bed6de;background:#e7f6fa;box-shadow:3px 4px 0 #e0edf1;}
.inset-chart {border-radius:42% 52% 39% 43% / 47% 34% 51% 43%;height:clamp(210px,24vw,380px);}
.missing-plate {height:clamp(150px,20vw,295px);border-radius:5px;}
.water-strip{height:clamp(92px,11vw,156px);border-left:3px solid var(--petrol);}
.reading-head {position:relative;}
.reading-head::after {height:8px;background:repeating-linear-gradient(115deg,#c8e4ee 0 4px,#f6fbfd 4px 8px);border-bottom:1px solid #c0d8e3;}
.site-facts > div {border-color:#d9e7ec;}.site-facts dt {font-size:12px;letter-spacing:.03em;align-self:center;}
.record:hover {box-shadow:inset 3px 0 #377a83;}.code-toolbar{border-top:2px solid #86cede;}
@media(max-width:760px){
  :root{--rail:0px;}
  .mast {min-height:48px;padding:0 13px;gap:9px;}
  .menu-trigger {min-height:45px;width:45px;margin-left:-13px;background:#edf8fc;color:#17647f;}
  .page-home .mast {inset:10px 10px auto;gap:5px;}
  .page-home .menu-trigger {min-height:36px;width:40px;border-radius:5px;margin:0;box-shadow:0 1px 3px #377c981a;}
  .page-home .wordmark {padding:0 10px;min-height:32px;font-size:13px;}
  .page-home .languages {min-height:32px;padding:1px 3px 1px 7px;}
  .rail,.drawer-close{color:#375a69;}
  .atlas {height:calc(100svh - 32px);min-height:385px;}
  .atlas-surface {bottom:28px;}
  .chart-index {left:11px;top:60px;width:204px;max-width:calc(100% - 105px);}
  .chart-index summary{padding:7px 10px;gap:8px;}.chart-index summary strong{font-size:15px;}.index-rose{width:26px;height:26px;}.index-rose .icon{width:22px;height:22px;}
  .index-body {max-height:calc(100svh - 216px);}
  .chart-tools-v2 {right:11px;top:60px;}.layer-trigger{min-height:34px;padding:0 10px;}
  .chart-zoom {right:11px;width:34px;top:49%;}.chart-zoom button{height:31px;}.zoom-track{height:52px;}.zoom-track input{height:48px;}
  .overview {right:10px;bottom:40px;width:91px;padding:3px;}.overview-head{font-size:9px;line-height:15px;}
  .chart-legend{left:11px;bottom:41px;padding:4px 7px;gap:4px;}.chart-legend i{width:42px;}
  .chart-status {height:28px;padding:0 10px;gap:10px;justify-content:space-between;}.chart-status .gesture{display:none;}
  .chart-coords,.chart-status{font-size:10px;}.map-scale small{font-size:9px;}
  .station span{font-size:12px;}.shoal-detail{width:181px;bottom:79px;left:11px;right:auto;padding:8px 9px;}.detail-art,.shoal-detail [data-study]{height:78px;}
  .page-home .site-footer {min-height:32px;font-size:10px;padding:4px 9px;gap:5px;}
  .page-home .footer-links{gap:6px;}
  .empty-basin {grid-template-columns:1fr;}.empty-basin>.atlas-plate {grid-row:2;grid-column:1;min-height:0;height:155px;border-left:0;border-top:1px solid #a7b9ac;}
  .inset-chart {width:min(82vw,420px);}.missing-plate{max-height:190px;}
}
@media(max-height:550px){.atlas{min-height:328px;}.overview{width:72px;}.chart-index .index-body{max-height:145px;}.chart-zoom .zoom-track{display:none;}.shoal-detail{bottom:40px;}.detail-art,.shoal-detail [data-study]{height:60px;}}
@media(pointer:coarse){.find-place{min-width:38px;}.index-place{min-height:42px;}.chart-zoom button{min-height:35px;}}
@media(prefers-reduced-transparency:reduce){.page-home .wordmark,.page-home .languages,.layer-trigger{background:var(--surface);backdrop-filter:none;}}

.catalog-tabs {display:grid;grid-template-columns:repeat(3,1fr);padding:2px;gap:2px;margin:10px 0 0;background:#eff5f8;border:1px solid #d7e4ea;border-radius:5px;}
.catalog-tabs button {padding:4px 2px;min-height:27px;color:#426371;border-radius:3px;font:600 12px var(--sans);}
.catalog-tabs button[aria-pressed=true] {background:#fff;color:#0c607e;box-shadow:0 1px 2px #47778f25;}
.filtered-out {display:none!important;}

@media(prefers-reduced-motion:no-preference) {
  .station b,.survey-point>.icon,.index-place,.catalog-tabs button{transition:background .14s ease,box-shadow .14s ease;}
  .layer-list:not([hidden]),.shoal-detail:not([hidden]){animation:instrument-in .15s ease-out;}
  @keyframes instrument-in {from{opacity:0;translate:0 3px;}to{opacity:1;translate:0 0;}}
}

.reading-head {display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,23%);align-items:end;gap:25px;max-width:none;padding-bottom:25px;}
.reading-inset {height:auto;aspect-ratio:2/1;border:1px solid #8da8a0;border-radius:5px;overflow:hidden;background:#d7e8d8;}
.reading-grid {grid-template-columns:minmax(0, min(100%,74ch)) minmax(145px,220px);}
.contents {border:1px solid #cbdfe6;border-radius:5px;background:#f4fbfd;padding:0 9px 7px;}
.contents summary {border-bottom:1px solid #d5e6ee;padding-block:9px;color:#2d5d65;}
.contents li a[aria-current] {background:#e5f5fa;border-color:#437681;}
.code-block {border:1px solid #fff;border-radius:5px;overflow:hidden;}
@media(max-width:760px){.reading-head{display:block;}.reading-inset{display:none;}}

.atlas:fullscreen .chart-index {left:18px;top:16px;}
.atlas:fullscreen .chart-tools-v2 {right:18px;top:16px;}

.chart-index:not([open]) {width:224px;}
.chart-index:not([open]) summary {border:0;border-radius:9px;}
.chart-index[open] summary {border-radius:9px 9px 0 0;}
.chart-index .index-rose {border:0;border-radius:4px;background:transparent;}
.chart-index .fold {margin-left:0;color:#5a879a;width:6px;height:6px;}
.command-key {margin-left:auto;border:1px solid #d4e3eb;border-radius:4px;padding:1px 5px;color:#5d7986;font:11px/1.25 var(--mono);}
.chart-actionbar {display:flex;align-items:center;gap:6px;}
.clear-view {display:grid;place-items:center;min-height:37px;width:38px;border:1px solid #b3cbd5;border-radius:50%;background:#fffffff2;color:#335e70;box-shadow:0 2px 6px #30739116;}
.clear-view .icon {width:18px;height:18px;}
.clear-view[aria-pressed=true],.layer-trigger[aria-expanded=true] {background:#daf2fa;color:#0e617c;border-color:#8ac1d3;}
.clear-view:hover,.layer-trigger:hover {border-color:#6ea6b9;}
.atlas.clean-view :is(.chart-index,.layer-trigger,.layer-list,.chart-zoom,.overview,.chart-legend,.shoal-detail,.chart-status,.stations,.survey-point,.place-names,.geo-grid,.course-lines) {display:none!important;}
.atlas.clean-view .atlas-surface {inset:0;}
@media(min-width:761px){.page-home:has(.atlas.clean-view) .rail {visibility:hidden;}}
.catalog-tabs button[aria-pressed=true] {border-bottom:2px solid #1384a4;}
.index-place[data-selected]{color:#0e6079;}
@media(max-width:760px){
  .chart-index:not([open]) {width:min(175px,calc(100vw - 138px));}
  .chart-actionbar {gap:4px;}
  .clear-view {width:34px;min-height:34px;}
  .chart-index .index-rose {width:20px;height:20px;}
  .chart-index .index-rose .icon {width:17px;height:17px;}
  .command-key {display:none;}.chart-index .fold {margin-left:auto;}
}
@media(max-height:550px) and (min-width:761px){.chart-index .index-body{max-height:calc(100dvh - 120px);}}

.micro-labels {position:absolute;inset:0;display:none;pointer-events:none;}
.atlas[data-close-range]:not(.clean-view) .micro-labels:not([hidden]) {display:block;}
.micro-labels span {position:absolute;padding:1px 4px;white-space:nowrap;font:600 11px/1.45 var(--sans);color:#345f72;background:#ffffffdc;border-bottom:1px solid #5993a5;transform:translate(-100%,-100%) scale(var(--unzoom,1));transform-origin:100% 100%;}
.micro-labels span::after {content:"";position:absolute;left:100%;top:100%;width:13px;height:1px;background:#5993a5;transform-origin:0 0;transform:rotate(37deg);}
.detail-crane {left:59%;top:30.3%;}
.detail-jetty {left:56.4%;top:36.7%;}

[data-place][data-off-chart] {visibility:hidden;}

.chart-index:not([open]) :is(.when-open,.index-rose .icon:last-child),
.chart-index[open] :is(.when-folded,.index-rose .icon:first-child) {display:none;}

.status-notes {display:inline-flex;align-items:center;gap:6px;min-height:26px;color:#315b70;}
.status-notes:hover {color:#005e7b;text-decoration:underline;text-underline-offset:3px;}
.recent-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.recent-heading h2 {font-size:clamp(24px,3vw,40px);}
.index-body {padding-bottom:12px;}
/* The legend uses the same three marker silhouettes as the chart. */
.fine-ink {display:none;}
.atlas[data-close-range] .fine-ink:not([hidden]) {display:block;}
.station,.survey-point {
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:4px;pointer-events:auto;
  height:54px;min-width:44px;padding:0 3px 8px;cursor:pointer;white-space:nowrap;
  transform:translate(-22px,-100%) scale(var(--unzoom,1));transform-origin:22px 100%;
}
.station-a {left:40%;top:47%;}.station-b {left:68%;top:34%;}.survey-point {left:48%;top:60%;}.survey-point.beacon {left:39%;top:31%;}.survey-point.buoy {left:73%;top:68%;}
.marker-badge {width:38px;height:42px;flex:none;overflow:visible;filter:drop-shadow(0 1px 1px #244e6133);}
.badge-site {color:white;--badge-fill:#25758e;--badge-edge:#245d71;--rim:#9ed3e0;}
.station-b .badge-site {--badge-fill:#397b91;}
.badge-aid {color:#755136;--badge-fill:#fff1dc;--badge-edge:#9f7851;--rim:#d8b98a;}
.badge-shoal {color:#155f70;--badge-fill:#daf6f0;--badge-edge:#568d8a;--rim:#90c6bf;}
.badge-shell {fill:var(--badge-fill);stroke:var(--badge-edge);stroke-width:1.45;stroke-linejoin:round;}
.badge-rim {fill:none;stroke:var(--rim);stroke-width:.8;stroke-linecap:round;}
.station::before,.survey-point::before {content:"";position:absolute;left:21px;bottom:3px;height:7px;width:1.4px;background:#557f8c;}
.station::after,.survey-point::after {content:"";position:absolute;left:18px;bottom:0;width:8px;height:5px;background:#527e89;border:1px solid #fff;border-radius:50%;}
[data-place][data-selected] {z-index:3;}
[data-place][data-selected]::after {left:13px;bottom:-2px;width:18px;height:8px;background:#e3f6fc;border:1.5px solid #1684a3;box-shadow:0 0 0 2px #ffffffbf;}
[data-place][data-selected] .badge-shell,[data-place].traced .badge-shell {stroke:#065e79;stroke-width:2.3;}
.station span,.survey-point .pin-caption {padding:4px 7px;border:1px solid #a8c6d3;border-radius:4px;background:#fffffff0;color:#244e60;font:650 12px/1.4 var(--sans);box-shadow:0 1px 3px #49798a13;}
[data-place].label-left span {position:absolute;right:calc(100% + 1px);bottom:15px;}
.survey-point .pin-caption {position:absolute;left:calc(100% + 1px);bottom:15px;visibility:hidden;}
.survey-point.label-left .pin-caption {left:auto;}
[data-place].pin-below {transform:translate(-22px,0) scale(var(--unzoom,1));transform-origin:22px 0;padding-bottom:0;padding-top:8px;}
[data-place].pin-below::before {bottom:auto;top:2px;}
[data-place].pin-below::after {bottom:auto;top:0;}
[data-place].pin-below .badge-shell {transform:translateY(44px) scaleY(-1);}
[data-place].pin-below .badge-rim {visibility:hidden;}
.survey-point:focus-visible .pin-caption,.survey-point.traced .pin-caption {visibility:visible;}
@media(hover:hover){.survey-point:hover .pin-caption{visibility:visible;}[data-place]:hover .badge-shell {stroke-width:2.2;}}
.station:focus-visible,.survey-point:focus-visible {outline-offset:2px;border-radius:7px;}
.layer-list {position:absolute;right:0;top:calc(100% + 9px);width:292px;max-height:min(545px,calc(100dvh - 100px));display:flex;flex-direction:column;overflow:hidden;padding:0;}
.sheet-heading {display:flex;align-items:center;gap:9px;padding:10px 13px 9px;border-bottom:1px solid #dce8ee;}
.sheet-heading h2 {margin:0;color:var(--sea-ink);font:650 15px/1.4 var(--sans);letter-spacing:.015em;}
.sheet-sign {color:#126c88;display:grid;place-items:center;width:25px;height:25px;}
.sheet-sign .icon {width:20px;height:20px;}
.sheet-close {display:grid;place-items:center;margin-left:auto;width:32px;height:32px;border-radius:6px;color:#42677a;}
.sheet-close:hover,.sheet-close:focus-visible {background:#e9f6fa;}
.sheet-close .icon {width:17px;height:17px;}
.layer-scroll {padding:12px 13px 6px;overflow:auto;overscroll-behavior:contain;min-height:0;}
.map-presets {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px;}
.map-presets button {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:3px 3px 5px;background:#fbfdfe;color:#476679;border:1px solid #ccdde5;border-radius:6px;overflow:hidden;font:600 12px/1.3 var(--sans);}
.map-presets button[aria-pressed=true] {border-color:#2788a6;color:#0d5d78;background:#edf9fd;box-shadow:inset 0 0 0 .6px #2788a6;}
.preset-map {display:block;width:100%;height:29px;border-radius:3px;background:#e7f7fa;}
.layer-group {margin:0 0 8px;padding:0;border:0;min-width:0;}
.layer-group legend {width:100%;padding:0 0 4px;margin:0;color:#526e79;font:600 11px/1.6 var(--sans);letter-spacing:.06em;border-bottom:1px solid #e1ebef;}
.layer-option {position:relative;display:flex;align-items:center;gap:8px;min-height:38px;padding:3px 2px;border-radius:4px;font:550 13px/1.35 var(--sans);cursor:pointer;}
.layer-option:hover {background:#f0f8fc;}
.layer-symbol {display:grid;place-items:center;flex:none;width:30px;height:26px;border:1px solid #c9e0e8;border-radius:4px;background:#eff9fc;color:#2c7287;}
.layer-symbol .icon{width:22px;height:20px;}
.layer-option[data-key=navigation] .layer-symbol {background:#fff5e7;border-color:#ead9bd;color:#796143;}
.layer-option[data-key=shoals] .layer-symbol {background:#e9f8f3;color:#2b716d;}
.layer-option input {position:absolute;right:2px;opacity:0;margin:0;width:32px;height:20px;cursor:pointer;}
.switch-track {flex:none;margin-left:auto;position:relative;width:31px;height:18px;background:#edf1f3;border:1px solid #b3c3cb;border-radius:12px;pointer-events:none;}
.switch-track::before {content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;background:white;border:1px solid #8fa2ad;border-radius:50%;}
.layer-option input:checked+.switch-track {background:#26839d;border-color:#20768d;}
.layer-option input:checked+.switch-track::before {left:15px;border-color:white;}
.layer-option input:focus-visible+.switch-track {outline:2px solid #087197;outline-offset:3px;}
.layer-legend {display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;border-top:1px solid #dce8ee;background:#f7fbfd;padding:7px 14px;font-size:12px;color:#486777;}
.layer-legend output {font:600 12px var(--mono);}
.layer-legend button {padding:5px 3px;color:#0e6782;font-size:12px;}
.layer-legend button:disabled {opacity:1;color:#6b7f89;}
@media(prefers-reduced-motion:no-preference){.switch-track::before{transition:left .12s ease;}.switch-track{transition:background .12s ease;}}
@media(forced-colors:active){.layer-option input{opacity:1;appearance:auto;}.switch-track{visibility:hidden;}}

/* On a phone the command bar stays under the thumb; the map remains live above each sheet. */
@media(max-width:760px), (pointer:coarse) and (max-height:520px) {
  .atlas {--dock-bottom:calc(36px + env(safe-area-inset-bottom,0px));--sheet-bottom:calc(var(--dock-bottom) + 54px);}
  .chart-index,.atlas:fullscreen .chart-index,.chart-index:not([open]) {
    top:auto;bottom:var(--dock-bottom);left:max(10px,env(safe-area-inset-left,0px));width:calc(100% - 154px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-width:260px;
  }
  .chart-index summary,.chart-index[open] summary {min-height:44px;border:0;border-radius:9px;padding:7px 12px;}
  .chart-index .index-body {
    position:absolute;left:0;bottom:calc(100% + 8px);width:min(440px,calc(100vw - 22px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
    padding:14px;max-height:min(48dvh,395px);background:white;border:1px solid var(--panel-rim);border-radius:12px;box-shadow:var(--panel-shadow);overflow:auto;overscroll-behavior:contain;
  }
  .chart-tools-v2,.atlas:fullscreen .chart-tools-v2 {position:static;}
  .chart-actionbar {position:absolute;bottom:var(--dock-bottom);right:max(10px,env(safe-area-inset-right,0px));z-index:6;gap:6px;}
  .layer-trigger,.clear-view {min-height:44px;border-radius:10px;}
  .layer-trigger {gap:7px;padding:0 12px;}.clear-view {width:44px;}
  .layer-list,.shoal-detail {position:absolute;top:auto;right:auto;left:max(10px,env(safe-area-inset-left,0px));bottom:var(--sheet-bottom);width:min(440px,calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));z-index:7;max-height:min(62dvh,465px);overflow:hidden;border-radius:13px;translate:0 var(--sheet-drag,0px);}
  .layer-list {display:flex;}
  [data-sheet-handle] {position:relative;touch-action:none;user-select:none;}
  [data-sheet-handle]::before {content:"";position:absolute;top:5px;left:calc(50% - 16px);width:32px;height:3px;border-radius:3px;background:#bcd0d9;}
  .sheet-heading {padding:9px 12px 1px;min-height:48px;}
  .sheet-close,.shoal-detail [data-close-inspect] {min-width:44px;min-height:44px;}
  .layer-scroll {display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding:9px 12px 0;}
  .map-presets {grid-column:1/-1;margin-bottom:11px;}
  .map-presets button {min-height:49px;}
  .layer-option {min-height:44px;gap:5px;padding-right:0;font-size:12px;}
  .layer-symbol {width:23px;height:23px;}.layer-symbol .icon{width:19px;height:18px;}
  .layer-legend {min-height:43px;padding:0 12px;}.layer-legend button{min-height:44px;}
  .shoal-detail {display:grid;grid-template-columns:minmax(84px,31%) 1fr;gap:3px 12px;padding:0 12px 11px;background:white;}
  .place-heading {grid-column:1/-1;min-height:48px;padding-top:6px;}
  .shoal-detail .detail-art,.shoal-detail [data-study] {grid-column:1;grid-row:2/4;width:100%;height:64px;margin-top:0;border-radius:4px;}
  .shoal-detail [data-detail-position] {grid-column:2;align-self:center;margin:0;}
  .shoal-detail .detail-open {grid-column:2;min-height:40px;align-self:center;}
  .overview {bottom:calc(var(--sheet-bottom) + 2px);}.chart-legend {bottom:calc(var(--sheet-bottom) + 2px);}
  .atlas:has(.chart-index[open],.layer-list:not([hidden]),.shoal-detail:not([hidden])) :is(.overview,.chart-legend) {visibility:hidden;}
  .atlas:has(.layer-list:not([hidden])) .chart-zoom,.atlas:has(.chart-index[open]) .chart-zoom {visibility:hidden;}
  .chart-zoom {right:max(10px,env(safe-area-inset-right,0px));width:46px;padding:0;top:41%;}
  .chart-zoom button {height:44px;width:44px;}
  .zoom-track {display:none;}
  .find-place {min-width:44px;}
  .chart-status {padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px));}
  .atlas.clean-view .chart-actionbar {bottom:var(--dock-bottom);}
  .station,.survey-point {min-width:46px;min-height:54px;}
  .lookup input,.index-place,.find-place {min-height:44px;}.catalog-tabs button {min-height:38px;}
}
@media(max-height:510px) and (orientation:landscape) {
  .atlas .layer-list,.atlas .shoal-detail {max-height:calc(100dvh - 118px);}
  .atlas .chart-index .index-body {max-height:calc(100dvh - 146px);}
  .layer-scroll {overflow-y:auto;}
}

@media(max-width:760px) and (max-height:510px) and (orientation:landscape), (pointer:coarse) and (max-height:510px) and (orientation:landscape) {
  .atlas .layer-list {left:auto;right:max(10px,env(safe-area-inset-right,0px));top:8px;bottom:var(--sheet-bottom,90px);max-height:none;width:min(420px,calc(100% - 146px));}
  .atlas .layer-list .preset-map {display:none;}
  .atlas .layer-list .map-presets button {min-height:44px;}
  .page-home:has(.atlas .layer-list:not([hidden])) .mast .languages {visibility:hidden;}
  .atlas:has(.layer-list:not([hidden])) .overview {visibility:hidden;}
}
@media(max-width:760px) and (max-height:550px) {
  .atlas {min-height:min(315px,calc(100dvh - 32px));height:calc(100dvh - 32px);}
}

@media(pointer:coarse) and (max-width:760px){.page-home .menu-trigger,.page-home .languages a {width:44px;min-height:44px;}.catalog-tabs button{min-height:44px;}}

.detail-actions {display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:6px;}
.detail-actions [data-focus-place] {display:inline-flex;align-items:center;justify-content:center;gap:5px;margin:0;min-height:32px;padding:5px 9px;color:#116a85;font-weight:600;font-size:12px;border:1px solid #c5dce5;border-radius:5px;background:#f6fbfd;}
.detail-actions .detail-open {margin:0;}
@media(max-width:760px), (pointer:coarse) and (max-height:520px) {
  .shoal-detail .detail-actions {grid-column:2;margin:0;justify-content:flex-start;gap:4px 8px;}
  .detail-actions [data-focus-place],.detail-actions .detail-open {min-height:44px;}
}

.coast-up {position:absolute;z-index:4;left:158px;top:66px;display:flex;align-items:center;gap:6px;min-height:34px;padding:3px 12px;background:#f7fcfa;border:1px solid #bad1d5;border-radius:18px;font-size:12px;}
.coast-up svg {width:15px;height:15px;}
.atlas:has(.chart-index[open]) .coast-up {visibility:hidden;}
@media(max-width:760px),(pointer:coarse) and (max-height:520px){.coast-up{top:66px;left:10px;min-height:40px;}}

@media(max-width:760px) and (orientation:portrait){
  .atlas-plane {transform:translate(calc(50cqw - 60.5%),calc(50cqh - 50%));}
}
@media(max-width:450px) and (orientation:portrait){
  .atlas:not([data-camera-ready]) .station-b span {position:absolute;right:calc(100% + 1px);bottom:15px;}
}
@media(max-width:760px){
  .page-home .site-footer,.atlas .chart-status,.atlas .chart-coords,.atlas .map-scale small,.atlas .overview-head,
  .atlas .chart-zoom output,.atlas .index-label {font-size:12px;}
}