/* Tide-Line Atlas · shared components (every page). Uses tokens.css only. */

/* ---------- foundations ---------- */
.sn-locked{overflow:hidden}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ink-strong);border-radius:6px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:400;padding:12px 18px;border-radius:10px;background:var(--ink-strong);color:var(--ink-inverse);font:700 15px var(--font-body);text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,.tabular{font-variant-numeric:lining-nums tabular-nums}

/* the tide line: a thin wave used for progress bars, dividers and chart baselines */
.tide-line{height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q12 0 24 5 T48 5' fill='none' stroke='%2306763e' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x center/48px 10px;opacity:.55}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font:650 15.5px/1 var(--font-body);letter-spacing:.2px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-tide);color:#fff}
.btn-primary:hover{background:#056033}
.btn-coral{background:var(--accent-coral);color:#fff}
.btn-coral:hover{background:#92671d}
.btn-outline{border-color:currentColor;color:var(--ink-strong);background:transparent}
.btn-outline:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn-light{background:var(--ink-inverse);color:var(--ink-strong)}
.btn-light:hover{background:#fff}
.btn-ghost-light{border-color:#F8F5EC66;color:var(--ink-inverse);background:transparent}
.btn-ghost-light:hover{background:#F8F5EC1a}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- site menu ---------- */
.sn{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);min-width:0;font-family:var(--font-body)}
.sn a{color:inherit;text-decoration:none}
.sn-brand{display:flex;align-items:center;gap:11px;flex:none;min-height:44px}
.sn-brand img{width:38px;height:38px}
.sn-brand span{display:flex;flex-direction:column;font:650 17px/1.05 var(--font-body);white-space:nowrap}
.sn-brand small{font:650 9px/1.9 var(--font-body);letter-spacing:1.9px;text-transform:uppercase;opacity:.72}
.on-dark .sn-brand img{filter:brightness(0) invert(1)}
.sn-links{display:flex;align-items:center;gap:2px}
.sn-links>a,.sn-drop>button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:0;border-radius:999px;background:none;color:inherit;font:650 14.5px var(--font-body);cursor:pointer;transition:background .2s}
.sn-links>a:hover,.sn-drop>button:hover,.sn-drop>button[aria-expanded=true]{background:color-mix(in srgb,currentColor 9%,transparent)}
.sn-links [data-current]::after{content:'';position:absolute;left:13px;right:13px;bottom:6px;height:3px;border-radius:2px;background:var(--accent-coral)}
.on-dark .sn-links [data-current]::after{background:var(--accent-coral-soft)}
.sn-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.sn-drop button[aria-expanded=true] .sn-chev{transform:rotate(180deg)}
.sn-live::before{content:'';width:8px;height:8px;border-radius:50%;background:#35D07F;box-shadow:0 0 0 3px #35D07F33}
.sn-drop{position:relative}
.sn-mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(calc(-50% + var(--sn-shift,0px)));width:min(720px,calc(100vw - 32px));padding:22px;border-radius:var(--radius-l);background:var(--bg-surface);color:var(--ink-strong);box-shadow:var(--shadow-2);z-index:60}
.sn-mega::before{content:'';position:absolute;inset:-14px 0 auto;height:14px}
.sn-mega[hidden]{display:none}
.sn-mega-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 14px}
.sn-mega-head p{margin:0;font:700 12px var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-coral)}
.sn-mega-head a{font:650 14px var(--font-body);color:var(--accent-tide);text-decoration:underline;text-underline-offset:3px}
.sn-regions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sn-regions a{position:relative;display:grid;grid-template-columns:64px 1fr;column-gap:14px;align-items:center;min-height:44px;padding:8px;border-radius:var(--radius);color:var(--ink-strong);text-decoration:none;transition:background .2s}
.sn-regions a:hover,.sn-regions a[aria-current]{background:var(--bg-mist)}
.sn-regions a[aria-current]::after{content:'Current';position:absolute;right:10px;top:10px;font:700 11px var(--font-body);color:var(--accent-tide)}
.sn-regions img{grid-row:span 2;width:64px;height:48px;border-radius:8px;object-fit:cover}
.sn-regions b{align-self:end;font:500 21px/1.05 var(--font-display)}
.sn-regions small{align-self:start;font-size:13px;color:var(--ink-muted)}
.sn-rn{display:none}

/* phone drawer: a modal navigation dialog */
.sn-burger{display:none;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 13px;border:1.5px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;background:none;color:inherit;font:650 14px var(--font-body);cursor:pointer}
.sn-bars{display:grid;gap:5px;width:16px}.sn-bars i{height:1.8px;background:currentColor;border-radius:2px}
.sn-compact .sn-burger{display:inline-flex}
.sn-drawer{position:fixed;inset:0;z-index:300;background:#071f13b3;backdrop-filter:blur(6px)}
.sn-drawer[hidden]{display:none}
.sn-drawer-in{position:absolute;inset:0 0 0 auto;width:min(440px,100%);overflow:auto;padding:80px 24px 32px;background:var(--bg-canvas);color:var(--ink-strong);box-shadow:var(--shadow-2);animation:sn-slide .3s var(--ease)}
@keyframes sn-slide{from{transform:translateX(40px);opacity:0}}
.sn-drawer h2{margin:0 0 10px;font:700 12px var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-coral)}
.sn-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--border-soft);border-radius:50%;background:var(--bg-surface);color:var(--ink-strong);cursor:pointer}
.sn-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sn-drawer nav{display:grid;margin-bottom:28px}
.sn-drawer nav a{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--border-soft);font:500 28px/1.1 var(--font-display);color:var(--ink-strong);text-decoration:none}
.sn-drawer nav a[aria-current]{color:var(--accent-tide)}
.sn-drawer-label{margin:0 0 10px;font:700 12px var(--font-body);letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-coral)}
.sn-regions.sn-regions-drawer{grid-template-columns:1fr}

/* home bar */
.sn-header{position:sticky;top:0;z-index:50;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:color-mix(in srgb,var(--bg-canvas) 92%,transparent);backdrop-filter:blur(14px) saturate(1.2);color:var(--ink-strong);border-bottom:1px solid var(--border-soft);transition:transform .35s var(--ease),box-shadow .3s}
.sn-header.scrolled{box-shadow:0 8px 24px #122f2112}
.sn-header.tuck{transform:translateY(-100%)}
.sn-header:focus-within{transform:none}

@media (max-width:1180px){.bar .sn-links{display:none}.bar .sn-burger{display:inline-flex}}
@media (max-width:900px){.sn-links{display:none}.sn-burger{display:inline-flex}}
@media (max-width:560px){.sn-brand small{display:none}.sn-brand span{font-size:15px}.sn-brand img{width:32px;height:32px}.sn-burger-label{display:none}.sn-burger{padding:0 13px}}

/* ---------- key-number tiles ---------- */
.fig-tile{display:flex;flex-direction:column;gap:6px;min-width:180px}
.fig-tile .fig-v{font:600 var(--fs-figure)/1 var(--font-body);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.fig-tile .fig-v small{font-size:.42em;font-weight:650;margin-left:4px;letter-spacing:0}
.fig-tile .fig-l{font:600 15px/1.35 var(--font-body)}
.fig-tile .fig-b{font:13.5px/1.4 var(--font-body);color:var(--ink-muted)}
.counting{font-variant-numeric:tabular-nums lining-nums}

/* ---------- live map cards ---------- */
.am{position:relative;margin:0;border-radius:var(--radius-l);overflow:hidden;background:var(--bg-dark);color:var(--ink-inverse);box-shadow:var(--shadow-2)}
.am-map{position:relative;width:100%;aspect-ratio:var(--ar,1.6);min-height:320px;max-height:min(78vh,760px);background:var(--bg-dark) radial-gradient(circle at 30% 30%,#143e29,#0a311e)}
.am-ui{position:absolute;left:14px;top:14px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;max-width:calc(100% - 84px)}
.am-ui>*{pointer-events:auto}
.am-years{display:flex;padding:3px;border-radius:999px;background:#071f13d9;backdrop-filter:blur(8px)}
.am-years button{min-height:36px;border:0;background:none;color:var(--ink-inverse-muted);font:650 13px var(--font-body);padding:0 14px;border-radius:999px;cursor:pointer;font-variant-numeric:lining-nums}
.am-years button[aria-pressed=true]{background:var(--ink-inverse);color:var(--ink-strong)}
.am-legend{list-style:none;margin:0;padding:9px 13px;display:flex;flex-wrap:wrap;gap:5px 14px;border-radius:var(--radius);background:#071f13d9;backdrop-filter:blur(8px);font:650 12.5px var(--font-body);color:var(--ink-inverse)}
.am-legend li{display:flex;align-items:center;gap:7px}
.am-legend i{width:12px;height:12px;border-radius:3px;box-shadow:0 0 0 1.5px #000a}
.am figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:14px 18px;background:var(--bg-dark-raised);font:15px/1.35 var(--font-body)}
.am figcaption b{font-weight:650}
.am figcaption small{display:block;margin-top:2px;color:var(--ink-inverse-muted);font-size:13px}
.am-open{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #F8F5EC55;color:var(--ink-inverse);text-decoration:none;font:650 14px var(--font-body);transition:background .2s}
.am-open:hover{background:#F8F5EC1a}
.am .maplibregl-ctrl-group{border-radius:10px;overflow:hidden}
.am .maplibregl-ctrl-group button{width:36px;height:36px}
.am-pop .maplibregl-popup-content{background:var(--bg-dark);color:var(--ink-inverse);border-radius:10px;padding:9px 13px;font:14px/1.35 var(--font-body);box-shadow:0 10px 30px #0006}
.am-pop .maplibregl-popup-tip{border-top-color:var(--bg-dark)!important;border-bottom-color:var(--bg-dark)!important}
.maplibregl-cooperative-gesture-screen{font-family:var(--font-body)}
.maplibregl-ctrl-scale{background:#0a311ecc!important;color:var(--ink-inverse)!important;border:1.5px solid #F8F5ECaa!important;border-top:0!important;border-radius:0 0 5px 5px;padding:1px 7px 2px!important;font:650 11px/1.4 var(--font-body)!important;backdrop-filter:blur(6px)}
.maplibregl-ctrl-attrib.maplibregl-compact{background:#0a311ecc!important;color:var(--ink-inverse-muted)}
.maplibregl-ctrl-attrib.maplibregl-compact a{color:var(--ink-inverse)}
.maplibregl-ctrl-attrib-button{filter:invert(1) brightness(1.4)}

/* map loading, slow and failed states */
.map-loader{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(circle at 50% 45%,#143e29,#0a311e 70%);color:var(--ink-inverse-muted);font:650 12px var(--font-body);letter-spacing:2px;text-transform:uppercase;transition:opacity .6s,visibility .6s}
.map-loader.done{opacity:0;visibility:hidden}
.map-loader.slow{text-transform:none;letter-spacing:0;font:15px/1.45 var(--font-body);color:var(--ink-inverse)}
.map-loader.slow .ld-ring{display:none}
.map-loader .ld-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ld-ring{width:44px;height:44px;border-radius:50%;border:2px solid #F8F5EC22;border-top-color:var(--accent-coral-soft);border-right-color:#5FC9A8;animation:ld-spin .9s linear infinite}
@keyframes ld-spin{to{transform:rotate(360deg)}}
.map-busy{position:absolute;z-index:4;left:50%;top:14px;translate:-50% 0;width:18px;height:18px;border-radius:50%;border:2px solid #F8F5EC33;border-top-color:var(--accent-coral-soft);opacity:0;transition:opacity .3s;animation:ld-spin .8s linear infinite;pointer-events:none}
.map-busy.on{opacity:1}

/* images: shimmer while loading, a stable labelled frame if they fail */
img.img-wait{background:linear-gradient(100deg,#E4E9E3 30%,#F6F3EA 50%,#E4E9E3 70%) 0 0/300% 100%;animation:img-shimmer 1.4s linear infinite;color:transparent}
@keyframes img-shimmer{to{background-position:-300% 0}}
.img-failed{position:relative;display:grid;place-items:center;min-height:120px;background:repeating-linear-gradient(135deg,#e7f0ec 0 10px,#F6F3EA 10px 20px);color:var(--ink-muted);font:600 14px/1.4 var(--font-body);text-align:center;padding:16px;border-radius:inherit}
.img-failed button{margin-top:8px}
dialog:has(img.img-wait)::after{content:'';position:fixed;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #F8F5EC33;border-top-color:var(--accent-coral-soft);animation:ld-spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){img.img-wait,.ld-ring,.map-busy,dialog::after{animation:none!important}.ld-ring{border-color:var(--accent-coral-soft)}}

/* ---------- charts ---------- */
.r-chart{margin:0;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-l);box-shadow:var(--shadow-1);padding:22px 24px 20px;color:var(--ink-strong);overflow:hidden}
.r-chart figcaption{padding:0 0 4px;font:500 var(--fs-h3)/1.15 var(--font-display);color:var(--ink-strong)}
.r-chart figcaption small{display:block;margin-top:6px;font:15px/1.45 var(--font-body);color:var(--ink-muted)}
.r-total{margin:6px 0 0;font:14px var(--font-body);color:var(--ink-body)}
.r-note{margin:14px 0 0;font:13.5px/1.5 var(--font-body);color:var(--ink-muted)}
.r-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font:600 13.5px var(--font-body);color:var(--ink-body)}
.r-legend span{display:inline-flex;align-items:center}
.r-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px}
.r-bars,.r-range{display:grid;gap:12px;margin-top:18px}
.r-bar-row{--k:0;display:grid;grid-template-columns:minmax(110px,190px) 1fr auto;gap:14px;align-items:center;font:15px var(--font-body)}
.r-bar-row .lab{font-weight:600;color:var(--ink-strong)}
.r-bar-row .val{font-weight:650;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--ink-strong)}
.r-bar-row .val small{font-weight:400;color:var(--ink-muted)}
.r-bar-row .track{display:flex;flex-direction:column;gap:3px;min-height:14px}
.r-bar-row .track i{display:block;height:14px;width:var(--w);border-radius:0 4px 4px 0;outline-offset:1px}
.r-chart[data-type=stacked] .r-bar-row .track{flex-direction:row;gap:2px;height:18px}
.r-chart[data-type=stacked] .r-bar-row .track i{height:100%;border-radius:0}
.r-chart[data-type=stacked] .r-bar-row .track i:last-child{border-radius:0 4px 4px 0}
.r-bar-row.grp-start{margin-top:10px;padding-top:12px;border-top:1px solid var(--border-soft)}
.rg-track{position:relative;height:12px;border-radius:6px;background:#122f210d}
.rg-track i{position:absolute;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--chart-1),color-mix(in srgb,var(--chart-1) 55%,var(--chart-2)))}
.rg-pt{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--chart-2);box-shadow:0 0 0 2px var(--bg-surface)}
.rg-axis{position:relative;height:20px;margin:6px 0 0;font:12.5px var(--font-body);color:var(--ink-muted)}
.rg-axis span{position:absolute;transform:translateX(-50%)}
.r-donut{position:relative;width:min(280px,72%);margin:16px auto 0}
.r-donut strong{position:absolute;inset:0;display:grid;place-items:center;font:600 34px var(--font-body);font-variant-numeric:lining-nums;color:var(--ink-strong)}
.r-line{width:100%;height:auto;margin-top:12px}
.r-line text{font:600 12.5px var(--font-body);fill:var(--ink-strong)}
.r-line text.ax{font-weight:400;fill:var(--ink-muted)}
.r-line .gl{stroke:#122f2114;stroke-width:1}
.r-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px;margin-top:28px}
.r-charts > .r-chart:only-child{max-width:880px}
[data-tip]{cursor:default}
[data-tip]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.r-donut svg circle:hover,.r-bar-row .track i:hover,.rg-track [data-tip]:hover{filter:brightness(1.08) saturate(1.1)}
.r-chart .r-src{margin:12px 0 0;font:13px var(--font-body);color:var(--ink-muted)}
/* source discrepancy note */
.r-warn{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--status-warning-bg);color:#573d0f;font:14px/1.45 var(--font-body)}
.r-warn b{color:var(--status-warning)}
/* draw-in */
@keyframes bar-grow{from{transform:scaleX(0)}}
@keyframes line-draw{from{stroke-dashoffset:1}}
@keyframes arc-in{from{stroke-dasharray:0 999}}
@keyframes pt-in{from{transform:scale(0)}}
.r-chart .track i,.r-chart .rg-track i{transform-origin:left;animation:bar-grow 1.1s var(--ease) both;animation-delay:calc(var(--k,0) * 70ms + 150ms)}
.r-chart .rg-pt{animation:pt-in .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0) * 70ms + 400ms)}
.r-line polyline{stroke-dasharray:1;animation:line-draw 1.6s var(--ease) both;animation-delay:calc(var(--k,0) * 200ms + 150ms)}
.r-line circle{animation:pt-in .5s ease both;animation-delay:1.3s;transform-box:fill-box;transform-origin:center}
.r-donut circle{animation:arc-in 1.3s var(--ease) both;animation-delay:calc(var(--k,0) * 150ms + 150ms)}
.pg:not(.in) .r-chart *,.chart-wait .r-chart *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.r-chart *{animation:none!important}}
@media (max-width:640px){.r-bar-row{grid-template-columns:1fr auto}.r-bar-row .track{grid-column:1/-1;grid-row:2}.r-chart{padding:18px 16px}}

/* chart tooltip (pointer and keyboard) */
.viz-tip{position:fixed;z-index:350;max-width:300px;padding:9px 13px;border-radius:10px;background:var(--bg-dark);color:var(--ink-inverse);font:600 14px/1.35 var(--font-body);box-shadow:0 12px 30px #0006;pointer-events:none;font-variant-numeric:lining-nums}
.viz-tip[hidden]{display:none}

/* the table behind a chart, folded */
.r-data{border-radius:var(--radius);background:var(--bg-surface);border:1px solid var(--border-soft)}
.r-data>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;cursor:pointer;list-style:none;font:650 15px var(--font-body);color:var(--ink-strong)}
.r-data>summary::-webkit-details-marker{display:none}
.r-data>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.r-data[open]>summary::after{transform:rotate(-135deg)}
.r-data>summary:hover{color:var(--accent-tide)}
.r-data .r-table,.r-data table{margin:0;box-shadow:none;border-radius:0 0 var(--radius) var(--radius)}
.r-data .scroll{overflow:auto;max-height:520px}
.r-data table{width:100%;border-collapse:collapse;font:14.5px var(--font-body);color:var(--ink-body)}
.r-data th,.r-data td{padding:11px 16px;border-top:1px solid var(--border-soft);text-align:left}
.r-data thead th{position:sticky;top:0;background:var(--bg-dark);color:var(--ink-inverse);font-size:13px;font-weight:650;letter-spacing:.4px;text-transform:uppercase}
.r-data td.num,.r-data th.num{text-align:right;font-variant-numeric:lining-nums tabular-nums}

/* ---------- zoomable figures: the photo is a real button ---------- */
.zoom-btn{all:unset;display:block;width:100%;height:100%;cursor:zoom-in;border-radius:inherit}
.zoom-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:40;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink-strong);color:var(--ink-inverse);box-shadow:var(--shadow-2);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}

/* ---------- 2000 ↔ 2025 swipe ---------- */
.sw{position:relative;overflow:hidden;--sw:50%;background:var(--bg-dark)}
.sw-map{position:absolute;inset:0}
.sw-b{clip-path:inset(0 0 0 var(--sw))}
.sw-tag{position:absolute;top:14px;z-index:3;padding:6px 14px;border-radius:999px;background:#071f13d9;color:var(--ink-inverse);font:700 14px var(--font-body);font-variant-numeric:lining-nums;pointer-events:none}
.sw-tag-a{left:14px}.sw-tag-b{right:64px}
.sw-handle{position:absolute;top:0;bottom:0;left:var(--sw);width:44px;margin-left:-22px;z-index:4;cursor:ew-resize;touch-action:none}
.sw-handle::before{content:'';position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--ink-inverse);box-shadow:0 0 0 1px #071f1366}
.sw-handle span{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--ink-inverse);box-shadow:var(--shadow-2)}
.sw-handle span::before,.sw-handle span::after{content:'';position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.sw-handle span::before{left:7px;border-right-color:var(--ink-strong)}
.sw-handle span::after{right:7px;border-left-color:var(--ink-strong)}
.sw-range{position:absolute;left:0;right:0;bottom:0;z-index:5;width:100%;height:36px;margin:0;opacity:0;cursor:ew-resize}
.sw-range:focus-visible ~ .sw-handle span{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- features in view (keyboard companion to the map) ---------- */
.am-feat{min-height:44px}
.am-list{list-style:none;margin:0;padding:10px 14px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;max-height:260px;overflow:auto;background:var(--bg-dark-raised);border-top:1px solid #F8F5EC1f}
.am-list[hidden]{display:none}
.am-list button{width:100%;min-height:40px;padding:6px 12px;border:1px solid #F8F5EC33;border-radius:10px;background:none;color:var(--ink-inverse);font:14px/1.3 var(--font-body);text-align:left;cursor:pointer}
.am-list button:hover{background:#F8F5EC14}
.am-list-empty{color:var(--ink-inverse-muted);font:14px var(--font-body)}
/* MapLibre's own stylesheet loads later and sets position:relative on every map; frames that fill their parent keep absolute */
.sw > .sw-map.maplibregl-map,.rg-canvas.maplibregl-map{position:absolute}
.am figcaption .am-feat{background:transparent;color:var(--ink-inverse);border:1.5px solid #F8F5EC55;font:650 14px var(--font-body);cursor:pointer}
.am figcaption .am-feat[aria-expanded=true]{background:var(--ink-inverse);color:var(--ink-strong)}
.am-list small{display:block;margin-top:2px;color:var(--ink-inverse-muted);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---------- language switch and the preliminary-translation notice ---------- */
.lang-switch{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,currentColor 28%,transparent);color:inherit;text-decoration:none;font:650 14.5px 'IBM Plex Sans Arabic','Source Sans 3',sans-serif;white-space:nowrap}
.lang-switch:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.lang-switch:lang(en){font-family:'Source Sans 3',sans-serif}
.draft-notice{margin:0;padding:9px var(--gutter);background:var(--status-warning-bg);color:#573d0f;font:500 14px/1.5 var(--font-body);text-align:center}
.draft-notice a{color:#573d0f;font-weight:700;margin-inline-start:8px}
.sn-header + .draft-notice{position:sticky;top:var(--bar-h);z-index:49}
.bar + .draft-notice{position:absolute;top:var(--bar-h);left:0;right:0;z-index:19}
.lm-nav + .draft-notice,.panel-head .draft-notice{display:none}

/* ---------- right-to-left (Arabic) ---------- */
.lang-ar body{text-align:start}
.lang-ar *{letter-spacing:0!important}
.lang-ar .kicker,.lang-ar .eyebrow,.lang-ar [class*=-k],.lang-ar .sn-mega-head p,.lang-ar .sn-drawer-label{text-transform:none}
.lang-ar h1,.lang-ar h2,.lang-ar h3,.lang-ar .h-display,.lang-ar .h-2{line-height:1.35!important;font-weight:600}
.lang-ar p,.lang-ar li,.lang-ar dd{line-height:1.85}
.lang-ar .hero-lead,.lang-ar .ft-top p,.lang-ar .lead,.lang-ar .first,.lang-ar blockquote{font-style:normal!important}
.lang-ar .sci,.lang-ar i[lang=la],.lang-ar .grp-species li i,.lang-ar .fg-card i,.lang-ar .latin{direction:ltr;unicode-bidi:isolate;font-family:'Newsreader',Georgia,serif!important}
.lang-ar .num,.lang-ar .tabular,.lang-ar [data-count-up]{unicode-bidi:isolate;direction:ltr;display:inline-block}
/* things pinned to one side move to the other */
.lang-ar .to-top{right:auto;left:22px}
.lang-ar .rail{right:auto;left:16px}
.lang-ar .rail a span{right:auto;left:22px}
.lang-ar .pages-panel{right:auto;left:0;box-shadow:20px 0 60px #071f1333}
.lang-ar .sn-drawer-in{inset:0 auto 0 0}
.lang-ar .sn-close{right:auto;left:16px}
.lang-ar .sn-regions a[aria-current]::after{right:auto;left:10px}
.lang-ar .tide-progress{display:flex}
.lang-ar .r-data>summary::after{margin-left:0;margin-right:auto}
/* charts: rows read right to left; plotted scales keep their left-to-right axis */
.lang-ar .rg-track,.lang-ar .rg-axis,.lang-ar .r-line,.lang-ar .db-track,.lang-ar .db-axis,.lang-ar .r-donut svg{direction:ltr}
.lang-ar .r-bar-row .track i,.lang-ar .mx-bar i{transform-origin:right}
.lang-ar .r-bar-row .track i{border-radius:4px 0 0 4px}
.lang-ar .db-axis{margin:8px 154px 0 122px}
@media (max-width:560px){.lang-ar .db-axis{margin:8px 94px 0 88px}}
/* maps keep their own layout; only their captions and legends follow the page */
.lang-ar .maplibregl-map{direction:ltr}
.lang-ar .am-legend,.lang-ar .am-list,.lang-ar .am figcaption{direction:rtl}
.lang-ar .am-ui{left:auto;right:14px;align-items:flex-end}
.lang-ar .am .maplibregl-ctrl-top-right{right:auto;left:0}
.lang-ar .r-bar-row .val{direction:ltr;unicode-bidi:isolate}
.lang-ar .sn-regions a[aria-current]::after{content:'الحالية'}
@media print{.lang-ar .am-map::after{content:'خريطة حية: افتح هذه الصفحة على الإنترنت لاستكشافها'}}
/* phones: the region bar keeps only what fits; the language switch also lives in the menu */
.sn-drawer-lang{margin:0 0 14px}
@media (max-width:700px){
  .bar .lang-switch,.bar-nav #copy-link,.bar-nav #print-page{display:none}
  .lm-nav .lang-switch{display:none}
}
/* Arabic has no true italic: everything upright except Latin scientific names */
.lang-ar *{font-style:normal!important}
.lang-ar .sci,.lang-ar .grp-species li i,.lang-ar .fg-card i,.lang-ar .latin,.lang-ar .trio-card .sci,.lang-ar .idx-table .sc{font-style:italic!important}
/* a failed small image (thumbnails, icons) shows a quiet placeholder, never the full message */
.img-failed.small{min-height:0!important;padding:0;font-size:0}
.img-failed.small > div{display:none}