/* Shared by story.html (v2) and seek.html (v3). The chrome block is v1's mock of
   discoverhuvadhuatoll.com, trimmed; tokens are the live site's own. */
:root{
  --bg:#F2F1EB; --accent:#01A5A6; --dark-accent:#0A6A83; --deep:#072C3E; --ink:#000;
  --muted:rgba(0,0,0,.58); --hairline:rgba(0,0,0,.14); --radius:14px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Inconsolata",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4vw,64px);
}
[hidden]{display:none !important}
html.hx-open,html.hx-open body{overflow:hidden}
/* The map's own base, scoped: .hv-embed wraps the story, .hx is the explorer on <body>.
   Nothing here may style the host page (discoverhuvadhuatoll.com via a code block). */
.hv-embed,.hx{color:var(--ink); font-family:var(--sans); font-weight:300; letter-spacing:-.02em; line-height:1.3; -webkit-font-smoothing:antialiased}
.hv-embed,.hv-embed *,.hx,.hx *{box-sizing:border-box}
.hv-embed :is(h1,h2,h3,p,a,button,input,figure,dl,dd,ul,li),.hx :is(h1,h2,h3,p,a,button,input,figure,dl,dd,ul,li){font-family:inherit; text-transform:none; letter-spacing:inherit}
.hv-embed :is(h1,h2,h3,p,dl,dd,li),.hx :is(h1,h2,h3,p,dl,dd,li){color:inherit}
.hv-embed :focus-visible,.hx :focus-visible{outline:2px solid var(--dark-accent); outline-offset:2px}
:is(.hv-embed,.hx) .eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; margin:0 0 14px}

:is(.hv-embed,.hx) .credit{padding:0 var(--pad) 40px; font-size:12px; color:var(--muted); line-height:1.5; max-width:90ch}

/* ---- buttons ---- */
:is(.hv-embed,.hx) .cta{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px; border:0; border-radius:999px;
  background:var(--deep); color:#fff; font:inherit; font-size:16px; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.16); transition:transform .25s ease}
:is(.hv-embed,.hx) .cta:hover{transform:translateY(-2px)}
:is(.hv-embed,.hx) .cta.light{background:#fff; color:var(--deep)}
:is(.hv-embed,.hx) .cta .n{font-family:var(--mono); font-size:14px; opacity:.7}

/* ---- explorer ---- */
.hx{position:fixed; inset:0; z-index:100; background:#0D4263; overflow:hidden}
.hx-map{position:absolute; inset:0}
.hx-flow{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
.hx-labels{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}
:is(.hv-embed,.hx) .lab{position:absolute; left:0; top:0; pointer-events:auto; cursor:pointer; font:inherit; font-size:12px; font-weight:400; line-height:1;
  color:#fff; background:rgba(7,44,62,.74); border:0; border-radius:4px; padding:4px 6px; white-space:nowrap}
:is(.hv-embed,.hx) .lab.on{background:#E03A2F}
/* Island names: italic and unboxed-looking, as on a chart, so they sit under the
   dive sites rather than competing with them. */
:is(.hv-embed,.hx) .lab.isl{font-style:italic; font-weight:400; font-size:11.5px; background:rgba(7,44,62,.6); padding:2px 5px; color:#fff}
:is(.hv-embed,.hx) .lab.isl.inhabited{font-weight:500; font-style:normal; font-size:12.5px; letter-spacing:.02em; background:rgba(7,44,62,.75)}
:is(.hv-embed,.hx) .lab.isl.uninhabited{font-size:11px; color:rgba(255,255,255,.9)}
.hx-top{position:absolute; top:0; left:0; right:0; z-index:5; padding:calc(env(safe-area-inset-top) + 10px) 0 0 10px;
  display:flex; flex-direction:column; gap:6px; pointer-events:none}
.hx-row{display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none; padding-right:24px; pointer-events:auto;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent); mask-image:linear-gradient(to right,#000 88%,transparent)}
.hx-row::-webkit-scrollbar{display:none}
.hx-row > *{flex:0 0 auto}
.hx-chips{display:flex; gap:6px}
.hx-top button{font:inherit; font-size:14px; color:var(--ink); background:rgba(255,255,255,.95); border:0; border-radius:999px;
  min-height:44px; padding:0 15px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); white-space:nowrap}
.hx-top button[aria-pressed="true"]{background:var(--dark-accent); color:#fff}
.hx-top .n{font-family:var(--mono); font-size:12px; opacity:.7}
.hx-find{width:44px; justify-content:center; padding:0 !important}
.hx-find[aria-expanded="true"]{background:var(--dark-accent) !important; color:#fff !important}
.hx-close{width:44px; justify-content:center; padding:0 !important; font-size:16px !important}
.hx-seasons button{font-size:13px; min-height:38px; background:rgba(7,44,62,.78); color:#fff}
.hx-search{margin-right:10px; pointer-events:auto; max-width:460px}
.hx-search input{width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:0; border-radius:12px; padding:12px 14px; box-shadow:0 4px 14px rgba(0,0,0,.2); outline:none}
.hx-search ul{list-style:none; margin:6px 0 0; padding:4px; background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-height:52vh; overflow:auto}
.hx-search ul:empty{display:none}
.hx-search li button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; font:inherit; font-size:15px; color:var(--ink); background:none; border:0; border-radius:8px; min-height:44px; padding:0 10px; cursor:pointer}
.hx-search li button:hover,.hx-search li button:focus-visible{background:rgba(1,165,166,.1)}
.hx-search .fk{font-family:var(--mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.hx-search .none{padding:12px 10px; font-size:14px; color:var(--muted)}
.hx-key[aria-expanded="true"]{background:var(--dark-accent) !important; color:#fff !important}
.hx-legend{margin-right:10px; max-width:340px; pointer-events:auto; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hx-legend p{display:flex; align-items:center; gap:10px; margin:6px 0; font-size:13.5px; line-height:1.3}
:is(.hv-embed,.hx) .lg{flex:0 0 22px; display:inline-flex; justify-content:center}
:is(.hv-embed,.hx) .lg.dive::before{content:''; width:12px; height:12px; border-radius:50%; background:#01A5A6; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(7,44,62,.25)}
:is(.hv-embed,.hx) .lg.approx::before{content:''; width:12px; height:12px; border-radius:50%; background:#8FD6D6; box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px rgba(7,44,62,.25)}
:is(.hv-embed,.hx) .lg.house::before{content:''; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #01A5A6}
:is(.hv-embed,.hx) .lg.surf::before{content:''; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:12px solid #072C3E}
:is(.hv-embed,.hx) .lg.stay::before{content:''; width:11px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 2.5px #072C3E}
:is(.hv-embed,.hx) .lg.air::before{content:''; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff' stroke='%23072C3E' stroke-opacity='.35'/%3E%3Cpath d='M8 2.5l1 3 4 2.5v1.2L9 8v3l1.5 1.2v.8L8 12.4 5.5 13v-.8L7 11V8L3 9.2V8l4-2.5z' fill='%23072C3E'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.hv-embed,.hx) .lg.isl{flex-basis:auto; font-style:italic; font-size:11px; color:#fff; background:#072C3E; border-radius:4px; padding:1px 5px}
.hx.finding .hx-season,.hx.finding .hx-note{display:none}
/* One bar: close, a search field that looks like one, the key. */
.hx-bar{display:flex; gap:6px; align-items:center; margin-right:10px; pointer-events:auto}
.hx-bar .hx-find{flex:1; min-width:0; justify-content:flex-start; gap:9px; padding:0 14px !important; color:var(--muted) !important; font-size:14.5px !important}
.hx-bar .hx-find span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hx-bar .hx-search{flex:1; min-width:0; position:relative; margin:0}
.hx-bar .hx-search input{height:44px; padding:0 14px; border-radius:999px}
.hx-bar .hx-search ul{position:absolute; left:0; right:-50px; top:calc(100% + 6px); z-index:3}
.hx-key{width:44px; justify-content:center; padding:0 !important}
/* Five filters in one bar, all visible: nothing lives off-screen. */
.hx-chips{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); margin-right:10px; padding:3px; background:rgba(255,255,255,.95); border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.15); pointer-events:auto; max-width:520px}
.hx-top .hx-chips button{min-height:40px; padding:0 4px; gap:5px; justify-content:center; background:none; box-shadow:none; font-size:13.5px}
.hx-top .hx-chips .n{display:none}
.hx-top .hx-chips button[aria-pressed="true"]{background:var(--dark-accent); color:#fff}
.hx-season{position:relative; align-self:flex-start; pointer-events:auto}
.hx-top .hx-season-btn{min-height:36px; font-size:13px; background:rgba(7,44,62,.8); color:#fff; padding:0 13px}
.hx-season-btn b{font-weight:500}
.hx-seasons{position:absolute; left:0; top:calc(100% + 6px); z-index:3; display:flex; flex-direction:column; gap:4px; padding:5px; background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hx-top .hx-seasons button{box-shadow:none; background:none; color:var(--ink); min-height:40px; justify-content:flex-start}

.hx-search .fn{display:flex; flex-direction:column; min-width:0}
.hx-search .fs{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw}
.hx-note{margin:0 10px 0 0; max-width:420px; pointer-events:auto; font-size:13px; line-height:1.42; background:rgba(255,255,255,.96); border-radius:10px; padding:9px 12px}
:is(.hv-embed,.hx) .sw{display:inline-block}
:is(.hv-embed,.hx) .sw.dive{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1.5px #fff}
:is(.hv-embed,.hx) .sw.surf{width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:10px solid #072C3E}
:is(.hv-embed,.hx) [aria-pressed="true"] .sw.surf{border-bottom-color:#fff}
:is(.hv-embed,.hx) .sw.snorkel{width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2.5px var(--accent)}
:is(.hv-embed,.hx) .sw.stay{width:10px; height:10px; border-radius:2.5px; background:#fff; box-shadow:inset 0 0 0 2px #072C3E}
.hx-reset{position:absolute; right:12px; bottom:150px; z-index:5; font:inherit; font-size:13px; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer}

.hx-strip{position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 7vw calc(env(safe-area-inset-bottom) + 10px); scrollbar-width:none; overscroll-behavior-x:contain}
.hx-strip::-webkit-scrollbar{display:none}
@media (pointer:fine){ .hx-strip{cursor:grab} }
.hx-strip.dragging{cursor:grabbing; scroll-snap-type:none; user-select:none}
.hx-strip.dragging .card{pointer-events:none}
.hx-end{flex:0 0 1px}
:is(.hv-embed,.hx) .card{flex:0 0 min(86vw,360px); scroll-snap-align:center; display:grid; grid-template-columns:78px 1fr; grid-template-rows:auto auto; gap:0 12px;
  text-align:left; font:inherit; color:var(--ink); background:#fff; border:0; border-radius:var(--radius); padding:8px; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .3s ease, box-shadow .3s ease}
:is(.hv-embed,.hx) .card.on{box-shadow:0 0 0 2.5px #E03A2F, 0 10px 28px rgba(0,0,0,.3)}
:is(.hv-embed,.hx) .card-ph{grid-row:1 / span 2; width:78px; height:96px; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#177c82,#072C3E)}
:is(.hv-embed,.hx) .card-ph img{width:100%; height:100%; object-fit:cover; display:block}
:is(.hv-embed,.hx) .card-tx{display:flex; flex-direction:column; gap:3px; min-width:0}
:is(.hv-embed,.hx) .card-k{font-family:var(--mono); font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--dark-accent)}
:is(.hv-embed,.hx) .card-n{font-size:16px; font-weight:400; letter-spacing:-.03em; line-height:1.15}
:is(.hv-embed,.hx) .card-m{font-size:12px; color:var(--muted)}
:is(.hv-embed,.hx) .card-l{font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
:is(.hv-embed,.hx) .card-d{align-self:end; margin-top:4px}
:is(.hv-embed,.hx) .card-d .depth{width:108px}
:is(.hv-embed,.hx) .depth{display:block; width:132px; height:auto; border-radius:6px; overflow:hidden}
:is(.hv-embed,.hx) .depth.big{width:100%; max-width:360px; border-radius:10px; margin:0 0 16px}
:is(.hv-embed,.hx) .depth .dl{font-family:var(--mono); font-size:9px; fill:#fff}
:is(.hv-embed,.hx) .depth.big .dl{font-size:11px}

.hx-sheet{position:absolute; inset:0; z-index:8; background:#fff; overflow:auto; transform:translateY(102%); visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s; overscroll-behavior:contain}
.hx-sheet.open{transform:none; visibility:visible; transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s}
.hx-back{position:sticky; top:0; z-index:2; width:100%; text-align:left; font:inherit; font-size:15px; min-height:52px; padding:calc(env(safe-area-inset-top)) 18px 0;
  background:rgba(255,255,255,.96); border:0; border-bottom:1px solid var(--hairline); cursor:pointer; color:var(--dark-accent)}
.hx-back-foot{position:sticky; top:auto; bottom:calc(env(safe-area-inset-bottom) + 14px); display:block; width:auto; margin:0 auto 14px; padding:0 22px; min-height:48px; border-radius:999px; border:0;
  background:var(--dark-accent); color:#fff; box-shadow:0 6px 18px rgba(7,44,62,.3)}
/* On a phone the place page rises over the map and stops half way, so the pin
   it describes stays in sight. Drag the handle up to read it all, down to close. */
.hx-grab{display:none; position:sticky; top:0; z-index:3; width:100%; min-height:44px; padding:14px 0 10px; border:0; background:#fff; touch-action:none; cursor:grab}
.hx-grab i{display:block; width:42px; height:4px; margin:0 auto; border-radius:2px; background:#C3CFD4}
@media (max-width:899px){
  .hx-sheet{top:auto; height:92dvh; border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.28)}
  .hx-sheet.open.peek{transform:translateY(48%); overflow:hidden}
  .hx-sheet.dragging{transition:none}
  .hx-grab{display:block}
  /* The big button at the foot is out of reach until the page is pulled up; the
     one at the top stays, so closing never depends on knowing the gesture. */
  .hx-sheet.peek .hx-back-foot{display:none}
  .hx-sheet.peek .hx-back{top:44px; min-height:44px; padding-top:0}
}
.hx-sheet-in{padding:18px 20px 24px; max-width:560px; margin:0 auto}
.hx-k{margin:0 0 6px; font-family:var(--mono); font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--dark-accent)}
.hx-sheet h2{margin:0; font-size:28px; font-weight:400; letter-spacing:-.04em; line-height:1.1}
.hx-sheet h2:focus{outline:none}
.hx-m{margin:6px 0 16px; font-size:13px; color:var(--muted)}
.hx-body p{font-size:16px; line-height:1.55; margin:0 0 16px}
.hx-body .thin{font-size:14px; color:var(--muted)}
:is(.hv-embed,.hx) .shot{margin:0 0 16px}
:is(.hv-embed,.hx) .shot img{display:block; width:100%; height:auto; max-height:300px; object-fit:cover; border-radius:12px}
:is(.hv-embed,.hx) .shot figcaption{margin-top:7px; font-size:12px; color:var(--muted)}
:is(.hv-embed,.hx) .shot .by{display:block}
:is(.hv-embed,.hx) .acts{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
:is(.hv-embed,.hx) .visit,:is(.hv-embed,.hx) .sharebtn{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; font:inherit; font-size:14px; text-decoration:none; cursor:pointer}
:is(.hv-embed,.hx) .visit{background:var(--deep); color:#fff}
:is(.hv-embed,.hx) .sharebtn{background:var(--bg); color:var(--ink); border:1px solid var(--hairline)}
:is(.hv-embed,.hx) .facts{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0 0 18px; font-size:14px}
:is(.hv-embed,.hx) .facts dt{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding-top:2px}
:is(.hv-embed,.hx) .facts dd{margin:0}
:is(.hv-embed,.hx) .near{border-top:1px solid var(--hairline); padding-top:14px}
:is(.hv-embed,.hx) .near h3{margin:0 0 4px; font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
:is(.hv-embed,.hx) .near button{display:block; width:100%; text-align:left; font:inherit; font-size:15px; min-height:44px; background:none; border:0; border-radius:8px; padding:0 8px; margin-left:-8px; cursor:pointer}
:is(.hv-embed,.hx) .near button:hover{background:rgba(1,165,166,.08)}
.hx-toast{position:absolute; left:50%; top:calc(env(safe-area-inset-top) + 112px); max-width:88vw; text-align:center; transform:translate(-50%,10px); z-index:9; background:var(--deep); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; opacity:0; transition:.25s; pointer-events:none}
.hx-toast.on{opacity:1; transform:translate(-50%,0)}

@media (min-width:900px){
  .hx-top{padding-left:16px}
  .hx-strip{padding-left:24px; padding-right:24px}
  .hx-sheet{left:auto; width:440px; transform:translateX(102%); box-shadow:-10px 0 40px rgba(0,0,0,.25)}
  .hx-sheet.open{transform:none}
  /* Reading a place: the sheet takes the right edge, so the strip and the
     controls move out from under it and stay usable. */
  .hx.reading .hx-strip,.hx.reading .hx-top{right:440px; transition:right .38s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion: reduce){ :is(.hv-embed,.hx) *{scroll-behavior:auto !important; transition:none !important; animation:none !important} }