/* Pinpocket (Oct 19, second pass): the map, the white logo and the + pin.
   Drag the pin or tap the map to move it; tap the pin and it bursts like a drop,
   then the add panel grows out of it: a floating glass panel, 12px from the screen edges. */
:root{
  --ink:#1E1E1E; --grey:#767676; --line:rgba(17,17,17,.16);
  --primary:#1E1E1E; --brand:#1E1E1E; --map:#FFFFFF; --red:#D0281C; --red-tint:#F2F2F2;
  --ctl:#1E1E1E; --field:rgba(255,255,255,.72);
  --shadow:0 0 14px rgba(17,17,17,.16);
  --glass:rgba(255,255,255,.72); --glass-blur:blur(20px) saturate(180%);
  --r:16px; --r-foot:43px; --ease:cubic-bezier(.45,0,.25,1); --out:cubic-bezier(0,0,.25,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--map);color:var(--ink);font-family:Figtree,system-ui,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;font-family:inherit}
button{cursor:pointer;color:inherit;font-family:inherit}
[hidden]{display:none!important}

/* the only text styles: 26 / 18 / 16 */
.title-m{margin:0;font-size:28px;font-weight:600;line-height:32px}
.title-s{font-size:18px;font-weight:600;line-height:32px}
.annot,.label{font-size:18px;line-height:32px;color:var(--grey);margin:0}

/* touch feedback: swell 30% then settle; round ones pulse a thin outline once; X and + turn a quarter */
.press{transition:transform .22s var(--out)}
.press.down{transform:scale(1.3);transition:transform .1s ease}
.btn.press.down{transform:scale(1.04)}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(17,17,17,.55)}to{box-shadow:0 0 0 11px rgba(35,38,43,0)}}
.pulse{animation:pulse .5s ease-out}
.turn svg{transition:transform .6s var(--ease)}
.turn.down svg{transform:none}

.btn{flex:1;height:52px;border-radius:26px;border:none;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 24px}
.btn.primary{background:var(--primary);color:#FFFFFF}
.btn.remove{background:var(--red-tint);color:var(--red)}
.btn.ghost{background:transparent;color:var(--primary)}
.btn.secondary{background:rgba(17,17,17,.16);color:var(--primary)}
.btn:disabled{background:rgba(17,17,17,.55);color:rgba(255,255,255,.72);cursor:default}
.round{width:44px;height:44px;border-radius:50%;border:none;background:var(--ctl);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}

/* the map is the screen */
#map{position:fixed;inset:0;background:var(--map)}
.leaflet-container{font-family:inherit;background:var(--map)}
.leaflet-control-zoom{display:none}
.leaflet-bottom.leaflet-right{right:auto;left:0}
.leaflet-control-attribution{font-size:14px;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:0 8px 0 0;margin:0!important}
.leaflet-bottom{bottom:env(safe-area-inset-bottom)}

/* the logo, alone at the top: white on the satellite map, no glow */
.logo{position:fixed;z-index:600;top:calc(env(safe-area-inset-top) + 16px);left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;color:#FFFFFF}
.logo span{font-family:Literata,serif;font-weight:600;font-size:28px;line-height:32px}
.logo svg{display:block}
@keyframes pf-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.pf-dot{transform-box:fill-box;transform-origin:center;animation:pf-typing 1.6s ease-in-out infinite}
.pf-d2{animation-delay:.22s}.pf-d3{animation-delay:.44s}
@media (prefers-reduced-motion: reduce){.pf-dot{animation:none;opacity:1}}

/* the + pin: where you are at first; drag it, or tap the map to send it there */
.addpin{width:48px;height:52px;display:block;cursor:pointer;transform-origin:50% 100%;transition:transform .25s var(--out)}
.addpin svg{display:block}
.addpin.down{transform:scale(1.15);transition:transform .1s ease}
.addpin.lift{transform:translateY(-10px) scale(1.08)}
.addpin.pop{animation:pinin .4s var(--out)}
@keyframes pinin{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.leaflet-marker-icon.gone{opacity:0!important;transition:none;pointer-events:none!important}

/* places already added */
.mk{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:content-box;border:0 solid var(--ink);margin:-4px;box-shadow:0 0 0 2px #FFFFFF}
.mk.sel{border-width:4px;margin:-8px;box-shadow:none}
.mk.pop{animation:mkin .45s var(--out)}
@keyframes mkin{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.leaflet-popup-content-wrapper{border-radius:var(--r);box-shadow:var(--shadow);padding:0;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.leaflet-popup-content{margin:0;text-align:center;min-width:160px;max-width:240px}
.leaflet-popup-tip-container,.leaflet-popup-close-button{display:none}
.leaflet-popup{margin-bottom:16px}
.tip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;cursor:pointer;color:var(--ink)}

/* re-centre: bottom right, clear of the home indicator; enabled once the map has moved */
#recenter{position:fixed;z-index:600;right:16px;bottom:calc(var(--cb, 0px) + 24px + env(safe-area-inset-bottom));transition:opacity .3s ease,transform .22s var(--out)}
#recenter:disabled{opacity:.4;cursor:default}
body.adding #recenter{opacity:0;pointer-events:none}

/* the liquid burst of the pin */
/* Oct 20: the intro, on every launch: white, Pinpocket where the region's name sits, the cursor where it rests with the line under it, a credit at the foot; a tap anywhere goes in */
#intro{position:fixed;inset:0;z-index:595;background:#FFFFFF;cursor:pointer;transition:opacity .6s ease;-webkit-user-select:none;user-select:none}
#intro.out{pointer-events:none;background:transparent!important}
/* Oct 21: going in: the words and the logo go at once; the white is eaten away by marker shapes that open from tiny to large, showing the map */
#intro.out>*:not(canvas){opacity:0;transition:opacity .18s ease}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Oct 20 (later): Pinpocket centred in the top quarter; in the middle, one block: the cursor and, 24px under it, the line; the credit at the foot */
#intro .w{position:absolute;left:32px;right:32px;top:calc(max(env(safe-area-inset-top), calc(((env(safe-area-inset-top) + 25%) / 2 - 18.5px) / 2)) + 3px);   /* Oct 23 (later): 40px higher, the tagline with it */   /* Oct 20: down by its own height (its top where its foot was) */   /* half the distance it had from the top, never under the clock */margin:0;text-align:center;font-family:Literata,serif;font-weight:600;font-size:46px;line-height:52px;color:#1E1E1E}   /* Oct 20: 16% then 20% bigger */
#intro .ln{position:absolute;left:32px;right:32px;top:calc(100% - 104px);margin:0;text-align:center;font-family:Literata,serif;font-weight:600;font-size:18px;line-height:32px;color:#1E1E1E}
#intro .cr{position:absolute;left:32px;right:32px;bottom:calc(env(safe-area-inset-bottom) + 16px);margin:0;text-align:center;font-size:14px;line-height:16px;color:#767676}
body.intro .bigpin{z-index:597}   /* Oct 21: on the splash the cursor already sits in its own place: nothing moves when you go in */
/* going in, the cursor travels down to its place */
body.introleave .bigpin{transition:opacity .3s ease,top .7s var(--ease);z-index:597}   /* stays above the white while it is cut away */
body.intro .logo,body.intro #edge,body.intro .toast{opacity:0!important;pointer-events:none!important}
/* Oct 20: the map's markers live in Leaflet's panes (z-index 600), above the splash: nothing of the map shows until the splash leaves */
body.intro #map,html.pfhold #map{visibility:hidden}
body.intro .bp-b{pointer-events:none}
#splash{position:fixed;inset:0;width:100%;height:100%;z-index:900;pointer-events:none}

/* the add panel: floating glass, 12px from the screen's sides and foot, grown out of the pin */
.form{position:fixed;z-index:800;left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;max-height:min(66vh, calc(var(--appvh) - env(safe-area-inset-top) - 96px));display:flex;flex-direction:column;
  background-color:#FFFFFF;background-image:radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px);background-size:12px 12px;
  border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);box-shadow:none;
  opacity:0;transform:scale(.04);pointer-events:none;visibility:hidden;
  transition:transform .5s var(--ease),opacity .35s ease,visibility 0s .5s}
.form.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:transform .5s var(--ease),opacity .35s ease,visibility 0s}
.xbtn{position:absolute;padding:0;z-index:2;top:16px;right:16px}
.form-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 16px 48px;scrollbar-width:none}
.form-body::-webkit-scrollbar{display:none}
.hd{padding-right:48px}
/* a name you edit by tapping it: text, not a box */
.title-in{display:block;width:100%;min-height:44px;padding:8px 0;border:0;outline:0;background:transparent;font:inherit;font-size:18px;line-height:32px;font-weight:600;color:var(--ink);border-radius:0;-webkit-appearance:none;text-overflow:ellipsis}
.title-in::placeholder{color:var(--grey);font-weight:600}
.title-in:focus{caret-color:var(--primary)}
.hd .annot{margin-top:4px}
.foot{flex-shrink:0;padding:16px 16px 24px;display:flex;gap:16px;border-top:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.field.first{margin-top:48px}
.input{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:24px;background:var(--field)}
.input input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;font-size:18px;color:var(--ink)}
.desc{position:relative}
textarea.box{width:100%;min-height:112px;resize:none;border:none;outline:none;border-radius:var(--r);background:var(--field);padding:16px 48px 16px 16px;font-size:18px;line-height:32px;color:var(--ink);display:block}
.mic{position:absolute;right:8px;bottom:8px}   /* Oct 20: bottom right of the Conta tudo box */
.mic.on{background:var(--red);animation:micp 1.4s ease-in-out infinite}
@keyframes micp{0%,100%{box-shadow:0 0 0 0 rgba(17,17,17,.55)}50%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}

/* categories: the map markers themselves; the chosen one wears the selected-marker border */
/* categories: white glass tiles (8px corners), a thin outline icon and the name in the category's colour, in the brand's letter */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;padding:16px 8px 16px;border:0;border-radius:8px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 0 8px rgba(17,17,17,.16);color:var(--c)}
.cat svg{display:block}
.cat .nm{font-family:Literata,serif;font-weight:600;font-size:18px;line-height:32px;color:var(--ct);text-align:center;text-wrap:balance}
.cat{transition:background-color .3s ease,color .3s ease,transform .22s var(--out)}
.cat .nm{transition:color .3s ease}
/* the chosen one turns inside out: the tile takes the colour, the icon and name turn white */
.cat.on{background:var(--c);color:var(--fg);box-shadow:none}
.cat.on .nm{color:var(--fg)}

.photos{display:flex;flex-wrap:wrap;gap:8px}
.photo{position:relative;width:88px;height:88px;border-radius:var(--r);background:var(--line) center/cover no-repeat}
.photo button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(17,17,17,.55);display:flex;align-items:center;justify-content:center;padding:0}

/* the logo opens the library: it stays the logo, turning blue over the light panel */
.logo{pointer-events:none;transition:top .5s var(--ease),color .4s ease}
.logo .tap{pointer-events:auto;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;color:inherit;font:inherit}
/* Oct 20: the logo lives at the bottom, in the thumb zone: the pin (the symbol) on the left, the word on its right, centred on the bubble;
   the lockup is centred and stays clear of the round buttons on the right. In the panels the word comes back to its own size, centred in the panel's foot */
.logo{top:var(--lgy, calc((env(safe-area-inset-top) + 25%) / 2 - 31px));bottom:auto;left:0;right:0;  /* Oct 20: up top, where the cursor was; the cursor took its place at the bottom */
  align-items:flex-start;
  transition:top .5s var(--ease),opacity .3s ease,color .4s ease}
body.detopen .logo,body.adding .logo{opacity:0;pointer-events:none}   /* Oct 28: searching keeps the roteiro's name */
/* Oct 20: the name can be dragged anywhere outside the 32px edge zone (the mini markers' zone); it stays exactly where it is let go (no glide, no bounce).
   Pushed to that zone on the left or right, it stops at its edge and its text aligns to that side; anywhere else it is centred */
.logo.free{left:var(--lgx);right:auto;width:max-content;max-width:calc(100% - 64px);padding:0}
.logo .tap{touch-action:none;-webkit-user-select:none;user-select:none}
.logo.al-l{justify-content:flex-start}.logo.al-l span{text-align:left}
.logo.al-r{justify-content:flex-end}.logo.al-r span{text-align:right}
.logo.dragging .tap{transition:none!important;cursor:grabbing}
/* its button too: hidden, the name must not answer a tap */
body.detopen .logo .tap,body.adding .logo .tap,body.dir .logo .tap{pointer-events:none;visibility:hidden;transition:visibility 0s .3s}
/* Oct 20: the region's name (or the name you gave it) at the bottom: big, centred, over several lines when long */
.logo{padding:0 48px}   /* never inside the 32px along the screen's edges: that is where the mini markers live */
.logo .tap{max-width:100%}
.logo span{display:block;font-size:44px;line-height:36px;padding:8px 0;text-align:center;text-wrap:balance;overflow-wrap:anywhere;transition:font-size .5s var(--ease),line-height .5s var(--ease)}
/* in the panels it sits in the header at the foot, between back and X: two lines at most */
.logo .tap svg{display:none}
.logo{justify-content:center}
.logo svg path,.logo svg circle{transition:fill .4s ease}
body.light-map .logo{color:var(--brand)}
body.light-map .logo .sym{fill:var(--brand)}
body.light-map .logo .pf-dot{fill:#FFFFFF}

/* map controls on the right: map look above re-centre, 16px apart */
body.adding #searchBtn,body.adding #viewBtn,body.preview #searchBtn,body.viewer #searchBtn{opacity:0;pointer-events:none}

/* small floating card for the map looks, grown from its button */
.card{position:fixed;z-index:820;right:16px;bottom:calc(var(--cb, 0px) + var(--vs, 0px) + 24px + 240px + env(safe-area-inset-bottom));width:min(296px, calc(100vw - 32px));padding:16px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r);box-shadow:var(--shadow);
  transform-origin:calc(100% - 22px) calc(100% + 38px);opacity:0;transform:scale(.1);pointer-events:none;visibility:hidden;transition:transform .45s var(--ease),opacity .3s ease,visibility 0s .45s}
.card.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:transform .45s var(--ease),opacity .3s ease,visibility 0s}
.card .ct{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card .xbtn{position:static}
.group{margin-top:16px;background:var(--field);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:16px;width:100%;min-height:48px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;font-size:18px;color:var(--ink)}
.row:last-child{border-bottom:none}
.row .name{flex-grow:1}
.row input[type=radio]{width:22px;height:22px;accent-color:var(--primary);margin:0;pointer-events:none}

/* the library: full screen glass, 12px from every edge */
.lib{position:fixed;z-index:850;top:calc(env(safe-area-inset-top) + 12px);left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);box-shadow:var(--shadow);
  transform-origin:50% 100%;opacity:0;transform:scale(.2);pointer-events:none;visibility:hidden;transition:transform .5s var(--ease),opacity .35s ease,visibility 0s .5s}
.lib.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:transform .5s var(--ease),opacity .35s ease,visibility 0s}
.lib-hd{position:relative;height:76px;flex-shrink:0}
.lib-hd .xbtn{top:16px}
.lib-hd .back{position:absolute;top:16px;left:16px}
.pick{display:flex;align-items:center;gap:8px;width:100%;min-height:56px;padding:8px 16px;border:0;border-radius:var(--r);background:var(--field);text-align:left;color:var(--ink)}
.pick .t{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.pick svg{transition:transform .4s var(--ease);color:var(--grey);flex-shrink:0}
.pick.open svg{transform:rotate(180deg)}
/* the library's order, top to bottom: the list, its buttons, the fixed controls, the header (back, Pinpocket, X) at the foot, under the thumb */
.lib-list{order:1}.lib-hd{order:4}
.lib-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:0;padding:24px 16px 48px}
.lib-list::-webkit-scrollbar{display:none}
.lib-list.ft{-webkit-mask-image:linear-gradient(transparent,#111111 24px);mask-image:linear-gradient(transparent,#111111 24px)}
.cards{display:flex;flex-direction:column;gap:16px}
.pcard{display:flex;align-items:center;gap:16px;width:100%;padding:16px;border:0;border-radius:var(--r);background:var(--field);text-align:left;color:var(--ink)}
.pcard.rotc{justify-content:space-between;color:#1E1E1E;min-height:72px;position:relative;isolation:isolate;background:#FFFFFF;padding:24px 24px}
.pcard.rotc::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--rbg,none);background-size:var(--rbs,auto);transform:translate(var(--ox,0px),var(--oy,0px))}
.pcard.rotc::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px var(--rc,#1E1E1E);pointer-events:none}
.pcard.rotc .title-s{font-size:28px;line-height:32px}   /* Oct 20: about 40% bigger */
.pcard.rotc .annot{color:#1E1E1E;font-size:28px;line-height:32px}
.cards.rcards{gap:16px}
.rarr{flex:none}
/* Oct 20: the roteiros panel wears the black line all round, like the form */
.pcard .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard .annot b{font-weight:600;color:var(--ink)}
.pcard .mk{flex-shrink:0;width:48px;height:48px;margin:0;box-shadow:none}
.empty{padding:24px 0;text-align:center}
.bk{margin-top:48px;display:flex;flex-direction:column;gap:8px}
.bk .annot{margin:0}
.bk-in{margin-top:16px;border-bottom:1px solid var(--line)}
.bk .btn{margin-top:16px;width:100%}
/* the name you edit by tapping it: text, not a box, over several lines */

/* a roteiro: its places in sequence, linked as a route */
.steps{margin-top:48px;display:flex;flex-direction:column;gap:8px;position:relative}
/* a step: the place's marker numbered as on the map, its name, and a grip to drag it into another order */
.grip{flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--grey);display:flex;align-items:center;justify-content:center;padding:0;touch-action:none;cursor:grab}
/* the leg between two places: the dashed route and its distance */
.leg{display:flex;align-items:center;gap:16px;height:40px;transition:opacity .2s ease}
.leg .line{width:48px;align-self:stretch;display:flex;justify-content:center}
.leg .line::before{content:'';width:2px;height:100%;background:repeating-linear-gradient(var(--grey) 0 4px,transparent 4px 8px);opacity:.6}
.steps.dragging .leg{opacity:0}
.steps.dragging .go{pointer-events:none}

/* the route on the map: its name at the top, X to leave it */
.route{position:fixed;z-index:600;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translate(-50%,-16px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);
  padding:8px 8px 8px 16px;border-radius:26px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);transition:transform .45s var(--ease),opacity .3s ease}
.route.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.route .title-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#FFFFFF;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;position:absolute;top:-10px;right:-10px;box-shadow:0 0 0 2px #FFFFFF}
/* the shared link, as a friend sees it: the map, the places, and a floating panel to keep them */
body.viewer .logo .tap{pointer-events:none}
body.viewer,body.preview{--vs:60px}
body.preview{--cb:0px}
/* map and list: the shared places as a map, or as cards to scroll through */
#viewBtn{position:fixed;z-index:870;right:16px;bottom:calc(var(--cb, 0px) + 24px + 60px + env(safe-area-inset-bottom));display:none;transition:bottom .5s var(--ease),transform .22s var(--out)}
body.viewer #viewBtn,body.preview #viewBtn{display:flex}
#viewBtn .m{display:none}
body.listopen #viewBtn .l{display:none}
body.listopen #viewBtn .m{display:block}
body.listopen{--cb:0px}
body.listopen #recenter{opacity:0;pointer-events:none}
/* Oct 20: the roteiro's name and who shared it stay exactly where they are while the list is open (as with the roteiros list) */
body.listopen .vpanel.on{transform:translateY(calc(100% + 24px))}
#vlist .lib-list{margin-top:0;padding-top:24px;padding-bottom:48px}
.vl-hd .annot{margin-top:4px}
.sect-t{font-size:18px;font-weight:600;line-height:32px}
.vl-hd .annot b{font-weight:600;color:var(--ink)}
.vcards{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.vc{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r);background:var(--field);overflow:hidden;text-align:left;color:var(--ink);box-shadow:0 0 8px rgba(17,17,17,.16);
  opacity:0;transform:translateY(24px) scale(.98);transition:opacity .5s ease,transform .6s var(--out)}
.vc.in{opacity:1;transform:none}
.vc .ph{position:relative;height:168px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--c) 12%, #FFFFFF) center/cover no-repeat;color:var(--c)}
.vc .ph .num{position:absolute;top:12px;left:12px;right:auto;width:32px;height:32px;font-size:18px;background:var(--c);color:var(--fg);box-shadow:0 0 0 2px #FFFFFF}
.vc .bd{display:flex;flex-direction:column;gap:4px;padding:16px}
.vc .ds{margin-top:8px;font-size:18px;line-height:32px}
body.preview .logo .tap{pointer-events:none}
.vpanel .xbtn{top:16px;right:16px}
.vpanel .hd{padding-right:48px}
body.viewer .vpanel .hd{padding-right:0}
.vpanel{position:fixed;z-index:800;left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;padding:24px 16px;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);box-shadow:var(--shadow);
  transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
.vpanel.on{transform:none}
.vpanel .annot{margin-top:4px}
.vpanel .annot b{font-weight:600;color:var(--ink)}
.vpanel .btn{width:100%;margin-top:16px}
.vpanel .btn.done{background:var(--primary);opacity:1}

/* search (from Fire Watch): the round button grows leftwards into a dark glass box; results float above it */
#searchBtn{position:fixed;z-index:600;right:16px;bottom:calc(var(--cb, 0px) + 24px + 60px + env(safe-area-inset-bottom));transition:opacity .3s ease,transform .22s var(--out)}
body.searching #searchBtn{opacity:0;pointer-events:none}
.ms{position:fixed;z-index:830;left:16px;right:16px;top:var(--mstop, 80px);max-width:358px;margin:0 auto;color:#FFFFFF;
  opacity:0;transform:translate(var(--msx, 0px), var(--msy, 0px)) scale(.15);transition:transform .45s var(--ease),opacity .3s ease}
.ms.on{opacity:1;transform:none}
.ms .bx{position:relative;display:flex;align-items:center;height:48px;border-radius:24px;background:rgba(17,17,17,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);overflow:hidden}
.ms .ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0}
.ms input{flex:1;min-width:0;height:48px;padding:0;border:0;outline:0;background:transparent;color:#FFFFFF;font:inherit;font-size:18px;caret-color:#FFFFFF;-webkit-appearance:none}
.ms input::placeholder{color:rgba(255,255,255,.72)}
.ms input::-webkit-search-cancel-button{display:none}
.ms .x{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;padding:0;border:0;background:transparent;color:#FFFFFF}
.ms .x svg{transition:transform .6s var(--ease)}
.ms .ls{margin:8px 0 0;padding:8px 0;list-style:none;border-radius:var(--r);background:rgba(17,17,17,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);
  overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .25s var(--ease);pointer-events:none}
.ms .ls.on{opacity:1;transform:none;pointer-events:auto}
.ms .ls button{display:flex;align-items:center;gap:16px;width:100%;padding:8px 16px;border:0;background:transparent;color:#FFFFFF;font:inherit;text-align:left}
.ms .ls .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.ms .ls b{font-size:18px;line-height:32px;font-weight:600}
.ms .ls span.s{font-size:18px;line-height:32px;color:rgba(255,255,255,.72)}
.ms .ls p{margin:0;padding:8px 16px;font-size:18px;line-height:32px;color:rgba(255,255,255,.72)}
.ms .ls li.here{border-bottom:1px solid rgba(255,255,255,.34);margin-bottom:4px;padding-bottom:8px}

/* lantern: the phone's compass turns the map, the places around you sit on the screen's edge where they are */
body.dir{--cb:calc(var(--dh, 0px) - 12px)}
/* Oct 20: places out of view show as 8px dots in their category colour, 8px inside the screen edge, in their direction */
#edge{position:fixed;z-index:595;pointer-events:none;top:env(safe-area-inset-top);bottom:0;left:0;right:0;transition:opacity .3s ease}
#edge i{position:absolute;left:0;top:0;width:26px;height:27px;color:var(--c);opacity:0;pointer-events:none;will-change:transform}
#edge i.on{pointer-events:auto}
#edge i::after{content:'';position:absolute;inset:-9px}  /* a 44px tap target */
#edge i svg{display:block}
/* a place's marker stays small until it is 40px inside the screen; then the edge pin itself becomes the marker, like jelly (one of three wobbles, at random), and back */
.mjel{transform-origin:50% 100%;transition:scale .4s var(--ease),opacity .3s ease}
/* Oct 20: zoomed out past the city level, the markers come down to 60% (around their tip); at that level and closer they keep their size */
/* (on a wrapper of its own: the edge animations drive .mjel's transform and would win over the size) */
.msz{transform-origin:50% 100%;transition:transform .35s var(--ease)}
body.zsmall .msz{transform:scale(var(--mk-sc,.6))}
/* Oct 20: a place's detail: the other markers leave (they shrink into their tips), its own stays */
body.detopen .mjel:not(.keep){scale:0;opacity:0;pointer-events:none}
body.detopen #edge{opacity:0}
/* Oct 25: while the pins fly in after the splash, every mini pin shows */
body.popin #edge{opacity:1!important}
#edge i.pop{opacity:1!important;pointer-events:none}
body.detopen #edge i{pointer-events:none}
/* the screen in four rows: the map shows only in the first, the place's pin centred in it; below, all white, edge to edge */
#det{top:25%;left:0;right:0;bottom:0;max-width:none;max-height:none;margin:0;background-image:none;border-radius:0;
  opacity:1;transform:translateY(100%);transition:transform .5s cubic-bezier(.65,0,.35,1),visibility 0s .5s}
#det.open{transform:none;transition:transform .5s cubic-bezier(.65,0,.35,1),visibility 0s}
#det .form-body{padding-top:24px}
#det .dx{position:absolute;z-index:2;top:20px;right:8px;width:48px;height:48px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center}
#det .dx svg{transition:transform .45s var(--ease)}
.dname{margin:0;padding:16px 48px 16px 16px;font-family:inherit;font-weight:600;font-size:28px;line-height:32px;color:#1E1E1E;overflow-wrap:anywhere}   /* Oct 20: the form's name */
#det::after{content:'';position:absolute;inset:0;z-index:6;border-radius:inherit;box-shadow:inset 0 0 0 6px var(--fcol,#1E1E1E);pointer-events:none}
.dcats .cat.on::after{box-shadow:none}
.dcats .cat.on::before{opacity:calc(var(--ta,.6) * .3)}
.dcats{margin-top:0}
.dcats .cat{pointer-events:none}
/* Oct 20: photos as a mosaic, edge to edge, 1px apart: one alone fills the width; then rows of two, 60/40 then 40/60, alternating;
   a last one alone keeps its slot's width. Editing, the grey + is one more tile in the sequence (up to 5 photos) */
.pmos{display:flex;flex-direction:column;gap:4px;margin:16px 0 0;width:100vw;margin-left:calc(50% - 50vw)}   /* edge to edge of the screen, whatever padding is around */
.pmos .row{display:flex;gap:4px;height:200px}
.pmos .row.one{height:240px}
.pmos .t{position:relative;flex:0 0 auto;height:100%;background:#F2F2F2 center/cover no-repeat;border:0;padding:0;border-radius:0}
.pmos .t.add{display:flex;align-items:center;justify-content:center}
.pmos .t .rm::after{content:'';position:absolute;inset:-6px}   /* Oct 25: a 44px touch area around the small remove button */
.pmos .t .rm{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(17,17,17,.55);display:flex;align-items:center;justify-content:center;padding:0}
#form.page{top:25%;left:0;right:0;bottom:0;max-width:none;max-height:none;margin:0;background-image:none;border-radius:0;
  opacity:1;transform:translateY(100%);transition:transform .5s cubic-bezier(.65,0,.35,1),visibility 0s .5s}
#form.page.open{transform:none;transition:transform .5s cubic-bezier(.65,0,.35,1),visibility 0s}
#form.page.swap,#det.swap{transition:none!important}
#form.page #formX{background:transparent;color:#1E1E1E;top:20px;right:8px;width:48px;height:48px}
/* Oct 20: the name and the X stay at the top, on white; while a name or notes are being written a hand-drawn check sits beside the X (tap it: done) */
#form .hd{position:sticky;top:-24px;z-index:1;margin:-24px -16px 0;padding:24px 16px 16px;background:#FFFFFF}
#form .hd + .field{margin-top:48px}
/* Oct 20: the white behind the name ends in Banhos' little waves (half circles up, half circles down) */
#form .hd::after{content:'';position:absolute;left:0;right:0;top:100%;height:16.2px;margin-top:-1px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62.4' height='16.2' viewBox='0 0 62.4 16.2'%3E%3Cpath d='M0 0H62.4V8.1A15.6 7.2 0 0 0 31.2 8.1A15.6 7.2 0 0 1 0 8.1Z' fill='%23FFFFFF'/%3E%3C/svg%3E") repeat-x 0 0/62.4px 16.2px}
/* Oct 20 (later): every panel has its X again, the form too (it closes it, as Cancelar does) */
/* Oct 20: while writing (with some text), a hand-drawn X (clears the field) and check (done) sit inside the field, on its right; they draw themselves in */
.fwrap{position:relative}   /* Oct 20: black circles, white icons, like the mic */
.fwrap.ed #nameIn{padding-right:112px}
.desc.ed #descIn{padding-right:112px}
@keyframes okdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* once written (and not being edited), the name and the notes lose their texture: just the text */
#nameIn.done,#descIn.done{background:transparent}
#cats .cat.on::before{opacity:calc(var(--ta,.6) * .3)}
#cats .cat:not(.on)::before{opacity:.16}
.dadd{display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin-top:16px;border:0;border-radius:8px;background:#F2F2F2;padding:0}
#det .foot{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.mjel.out{opacity:0;pointer-events:none}
@keyframes jel1{0%{transform:translate(var(--fx),var(--fy)) scale(var(--fs,.41));animation-timing-function:cubic-bezier(.45,0,.55,1)}40%{transform:scale(1.06,.95);animation-timing-function:cubic-bezier(.45,0,.55,1)}66%{transform:scale(.975,1.03);animation-timing-function:cubic-bezier(.45,0,.55,1)}86%{transform:scale(1.01,.993);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:none}}
@keyframes jel2{0%{transform:translate(var(--fx),var(--fy)) scale(calc(var(--fs,.41) * .9),calc(var(--fs,.41) * 1.1));animation-timing-function:cubic-bezier(.45,0,.55,1)}22%{transform:translate(calc(var(--fx) * .35),calc(var(--fy) * .35)) scale(.82,1.09);animation-timing-function:cubic-bezier(.45,0,.55,1)}50%{transform:scale(1.05,.96);animation-timing-function:cubic-bezier(.45,0,.55,1)}74%{transform:scale(.985,1.02);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:none}}
@keyframes jel3{0%{transform:translate(var(--fx),var(--fy)) scale(var(--fs,.41)) rotate(-3deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}42%{transform:scale(1.04,.965) rotate(1.5deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}68%{transform:scale(.98,1.025) rotate(-.75deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}88%{transform:scale(1.005,.995) rotate(.25deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:none}}
@keyframes jelout{0%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}30%{transform:scale(1.04,.96);animation-timing-function:cubic-bezier(.45,0,.55,1)}62%{transform:translate(calc(var(--fx) * .4),calc(var(--fy) * .4)) scale(.8,1.06);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate(var(--fx),var(--fy)) scale(var(--fs,.41))}}
#edge i.on{opacity:1}
body.listopen #edge,body.lantern #edge{opacity:0}
body.listopen #edge i,body.lantern #edge i{pointer-events:none}
  background:radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,255,255,.34), rgba(255,255,255,.34) 55%, rgba(255,255,255,0) 100%);
  -webkit-clip-path:polygon(50% 100%, 0 0, 100% 0);clip-path:polygon(50% 100%, 0 0, 100% 0)}
/* a place in lantern mode: its pin on the ring (or where it really is, once it's inside the ring), its distance under it */
/* directions: an arrow that points the way, the distance counting down */
.dirp{position:fixed;z-index:800;left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);box-shadow:var(--shadow);
  transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
body.dir .dirp{transform:none}
.dirp .row1{display:flex;align-items:center;gap:16px;padding-right:48px}
.dirp .arrow{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:var(--primary);color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.dirp .arrow svg{transition:none}
.dirp .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.dirp .km{font-size:28px;line-height:32px;font-weight:600}
.dirp .btn{margin-top:16px;width:100%;flex:none}
.dirp .xbtn{top:16px;right:16px}
.dirp.here .arrow{background:#1E1E1E}

/* the place marker: the Pinpocket pin in the category's colour, its icon in the middle; the same word in every list */
.pmk{position:relative;display:inline-block;flex-shrink:0;line-height:0}
.pmk svg.pin{display:block;overflow:visible}
.pmk .pic{position:absolute;left:50%;top:35.5%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;background:#1E1E1E;color:#FFFFFF}
.pmk .num{top:-8px;right:-10px}
.mpin{transform-origin:50% 100%;transition:transform .3s var(--ease)}
.mpin.sel{transform:translateY(-6px) scale(1.15)}
/* chosen: it grows from the marker into the cursor's size, softly, like jelly */
.mpin.big{animation:biggrow .75s linear both}
@keyframes biggrow{0%{transform:scale(.62);animation-timing-function:cubic-bezier(.45,0,.55,1)}45%{transform:scale(1.03,.975);animation-timing-function:cubic-bezier(.45,0,.55,1)}72%{transform:scale(.99,1.01);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:none}}
.mpin.pop{animation:mkin .45s var(--out)}
/* a place just added: it turns round on its upright axis two and a half times while it hops up a little, then lands where it belongs (after the form has folded away) */
/* Oct 20: now and then, somewhere out at sea, a rough black-lined fish jumps out of the water and dives back in, twice, splashing black drops */
.fish{position:relative;width:0;height:0;pointer-events:none}
.fish svg{position:absolute;left:-18px;top:-10px;overflow:visible}
.fish i{position:absolute;left:0;top:0;border-radius:50%;background:#1E1E1E}
.skyev{position:fixed;left:0;top:0;z-index:596;pointer-events:none}
.skyev svg{display:block}
.skyev .whl{transform-box:fill-box;transform-origin:center;animation:whl .7s linear infinite}
@keyframes whl{to{transform:rotate(360deg)}}
.newtag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 16px;border-radius:999px;background:#FFFFFF;border:4px solid var(--c);
  font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;pointer-events:none;animation:newtag 3.3s ease both}
@keyframes newtag{0%,14%{opacity:0}24%,80%{opacity:1}100%{opacity:0}}
.mpin.yay .pbody{animation:yay 1.5s cubic-bezier(.45,0,.55,1) .5s both}   /* only the pin jumps and spins; its scribble stays on the ground */
@keyframes yay{0%{transform:perspective(320px) translateY(0) rotateY(0)}35%{transform:perspective(320px) translateY(-22px) rotateY(400deg)}70%{transform:perspective(320px) translateY(-14px) rotateY(760deg)}100%{transform:perspective(320px) translateY(0) rotateY(900deg)}}
.mpin.yay .mshadow{transform-box:fill-box;transform-origin:50% 50%;animation:yaysh 1.5s cubic-bezier(.45,0,.55,1) .5s both}   /* Oct 23: as the pin leaves the ground, its shadow shrinks 20% and fades 10%; the scribble stays as it is */
@keyframes yaysh{0%,100%{transform:scale(1);opacity:1}35%{transform:scale(.8);opacity:.9}70%{transform:scale(.87);opacity:.94}}
.mpin.dim{opacity:0}
body.detopen #recenter,body.detopen #searchBtn,body.detopen #viewBtn{opacity:0;pointer-events:none}
/* the place's details: a floating glass panel grown from its pin */
.tr-note{margin:8px 0 0;text-align:center;font-size:14px;line-height:16px;color:#767676;text-wrap:balance}
.tr-note .tr-tog{display:inline;margin:0}
.tr-tog{display:block;margin:4px 0 0 16px;padding:0;border:0;background:transparent;font:inherit;font-size:14px;line-height:16px;font-weight:600;color:#767676;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ddesc{margin:0;padding:16px;font-size:18px;line-height:32px;color:#1E1E1E;white-space:pre-line}   /* as Conta tudo */
#det .foot{flex-direction:row;gap:16px}   /* Oct 20: as the form's foot: Editar the smaller, Como chegar the rest */
#det .foot #detEdit{flex:0 0 auto;padding:0 48px}
#det .foot #detGo{flex:1}
.gps{display:flex;align-items:center;gap:8px;margin-top:8px;font-variant-numeric:tabular-nums}
.gps button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px 0;border:0;background:transparent;color:var(--grey);padding:0}

.dz{margin-top:48px;display:flex;flex-direction:column;gap:8px}
.dz .btn{width:100%;flex:none}
/* a saved place's options: the three dots on its card open a small menu */
.omenu{position:fixed;z-index:880;width:200px;padding:8px 0;border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);
  opacity:0;transform:scale(.3);pointer-events:none;transition:transform .35s var(--ease),opacity .25s ease}
.omenu.open{opacity:1;transform:none;pointer-events:auto}
.omenu button{display:flex;align-items:center;width:100%;min-height:48px;padding:0 16px;border:0;background:transparent;font:inherit;font-size:18px;color:var(--ink);text-align:left}
.omenu button+button{border-top:1px solid var(--line)}
.omenu .red{color:var(--red)}


/* categories on the map: a round button in the column opens a small card with the category tiles to switch on and off */
#catBtn{position:fixed;z-index:600;right:16px;bottom:calc(var(--cb, 0px) + var(--vs, 0px) + 24px + 180px + env(safe-area-inset-bottom));transition:opacity .3s ease,bottom .5s var(--ease),background-color .3s ease,color .3s ease,transform .22s var(--out)}
#catBtn.filt{background:#FFFFFF;color:var(--ink)}
body.adding #catBtn,body.preview #catBtn,body.listopen #catBtn,body.lantern #catBtn,body.detopen #catBtn{opacity:0;pointer-events:none}
#catCard{bottom:calc(var(--cb, 0px) + var(--vs, 0px) + 24px + 240px + env(safe-area-inset-bottom));transform-origin:calc(100% - 22px) calc(100% + 38px)}
#catCard .annot{margin-top:4px}
.cats.mini{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.cats.mini .cat{min-height:72px;padding:16px 8px 8px;gap:4px}
.cats.mini .cat .nm{font-size:14px;line-height:16px}
/* the same tiles in the library, one row that scrolls sideways */
.cat .cnt{position:absolute;top:4px;right:4px;min-width:20px;height:20px;padding:0 8px;border-radius:10px;background:var(--ink);color:#FFFFFF;font:600 14px/16px Figtree,system-ui,sans-serif;text-align:center}
.cat.on .cnt{background:var(--fg);color:var(--c)}
.cat.zero{opacity:.38;cursor:default;box-shadow:none}
.cat.zero:active,.cat.zero.down{transform:none}

/* the big Pinpocket pin, in the middle of the screen: its tip is the centre of the map; it opens the search */
/* the big pin in the middle of the screen, its tip the centre of the map: tap it to search, drag it onto the map to add a place there, or slap it down to bury it.
   Oct 20: white with a 6px black outline (inside its edge), the tail outlined the same way */
/* Oct 20: the cursor rests at the bottom, in the thumb zone (its tip 112px up, clear of the mini pins); searching, it rises to the first quarter, above the keyboard */ /* Oct 23: 40px higher (tip 152px up) */
.bigpin{position:fixed;z-index:590;left:12px;right:12px;top:calc(100% - 152px);height:112px;margin-top:-112px;pointer-events:none}
/* searching: the open field sits centred, just above the keyboard (and iOS's bar on top of it), on iOS and Android alike; until the keyboard is up, about the middle */
.bigpin.open{top:var(--bpopen, calc(50% + 37px))}
/* Oct 22: opening the search: one smooth move from where the cursor is to the middle of the screen, then, once the keyboard is up, a quick
   short move to its place above the keyboard (never down first) */
.bigpin.open{transition:opacity .3s ease,transform .45s var(--ease),top .5s cubic-bezier(.33,0,.2,1),translate .8s ease,rotate .8s ease}
.bigpin.open.kbq{transition:opacity .3s ease,transform .45s var(--ease),top .24s cubic-bezier(.2,.8,.2,1),translate .8s ease,rotate .8s ease}
.bp-b{position:absolute;left:50%;top:0;width:104px;height:75px;margin-left:-48px;box-sizing:border-box;border:0;border-radius:37.5px;background:#FFFFFF;color:#1E1E1E;
  display:flex;align-items:center;overflow:hidden;pointer-events:auto;cursor:pointer;box-shadow:inset 0 0 0 6px #1E1E1E;
  transition:width .5s var(--ease),margin-left .5s var(--ease),left .5s var(--ease),transform .2s var(--out)}
.bp-t{position:absolute;left:50%;top:37.5px;width:60px;height:73.8px;margin-left:-32px;pointer-events:none}
/* the tail runs up behind the bubble (so the jelly never uncovers its top); a white joint inside the bubble opens its outline where the tail leaves */
.bp-j{position:absolute;left:50%;bottom:0;width:21px;height:7px;margin-left:-8px;background:#FFFFFF;pointer-events:none;-webkit-clip-path:polygon(0 0,100% 0,85.7% 100%,14.3% 100%);clip-path:polygon(0 0,100% 0,85.7% 100%,14.3% 100%)}
.bp-ic{flex:0 0 104px;height:75px;display:flex;align-items:center;justify-content:center;position:relative;transition:flex-basis .5s var(--ease)}
.bp-ic svg{position:absolute;transition:transform .35s var(--out),opacity .25s ease}
.bp-ic .ok{opacity:0;transform:scale(.3)}
.bigpin.ok .bp-ic .mg{opacity:0;transform:scale(.3)}
.bigpin.ok .bp-ic .ok{opacity:1;transform:none}
.bp-in{flex:1;min-width:0;width:0;height:75px;padding:0;border:0;outline:0;background:transparent;color:#1E1E1E;font:inherit;font-size:18px;font-weight:600;caret-color:#1E1E1E;opacity:0;pointer-events:none;-webkit-appearance:none;transition:opacity .25s ease}
.bp-in::placeholder{color:#767676;font-weight:400}
.bp-in::-webkit-search-cancel-button{display:none}
.bp-x{flex:0 0 0;width:0;height:75px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;transition:flex-basis .5s var(--ease),opacity .25s ease}
.bp-x svg{transition:transform .6s var(--ease)}
.bigpin.open .bp-b{width:min(100%, 400px);margin-left:calc(min(100%, 400px) / -2);cursor:text}
.bp-b.jelly{transition:none;transform-origin:50% 100%}   /* Oct 23: the jelly squashes and turns about the foot of the bubble, where the tail joins, so the outline's opening stays on the tail */
.bigpin.open .bp-ic{flex-basis:56px}
.bigpin.open .bp-in{opacity:1;pointer-events:auto;transition-delay:.2s}
.bigpin.open .bp-x{flex-basis:56px;opacity:1;transition-delay:0s,.2s}
.bigpin.down .bp-b{transform:scale(1.06)}
.bigpin.gone{opacity:0;pointer-events:none}
.bigpin.gone .bp-b{pointer-events:none}
.bigpin.pop .bp-b,.bigpin.pop .bp-t{animation:pinin .45s var(--out)}
.bigpin{transition:opacity .3s ease,transform .45s var(--ease),top .5s var(--ease)}
/* dragged somewhere, the pin stays there (on the screen) until it is buried or the search brings it back to the middle */
.bigpin{transform:translate(var(--ox, 0px), var(--oy, 0px))}
.bigpin{transition:opacity .3s ease,transform .45s var(--ease),top .5s var(--ease),translate .8s ease,rotate .8s ease}
.bigpin.drift:not(.open):not(.drag):not(.buried):not(.gone){animation:bpdrift 10s ease-in-out infinite}
@keyframes bpdrift{0%{translate:0 0;rotate:0deg}20%{translate:6px -8px;rotate:1.2deg}45%{translate:-4px -13px;rotate:-.9deg}70%{translate:-7px -4px;rotate:.7deg}100%{translate:0 0;rotate:0deg}}   /* Oct 22: about twice as much */
/* results float above the stretched pin, out of the keyboard's way */
/* the results open above the search field (the keyboard is below it) */
.bp-ls{position:absolute;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:8px 0;list-style:none;border-radius:var(--r);background:rgba(17,17,17,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);color:#FFFFFF;
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .25s var(--ease);pointer-events:none}
.bp-ls.on{opacity:1;transform:none;pointer-events:auto}
.bp-ls button{display:flex;align-items:center;gap:16px;width:100%;padding:8px 16px;border:0;background:transparent;color:#FFFFFF;font:inherit;text-align:left}
.bp-ls .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.bp-ls b{font-size:18px;line-height:32px;font-weight:600}
.bp-ls span.s{font-size:18px;line-height:32px;color:rgba(255,255,255,.72)}
.bp-ls p{margin:0;padding:8px 16px;font-size:18px;line-height:32px;color:rgba(255,255,255,.72)}
.bp-ls li.here{border-top:1px solid rgba(255,255,255,.34);margin-top:4px;padding-top:8px;order:9}
body.listopen .bigpin,body.preview .bigpin,body.viewer .bigpin,body.lantern .bigpin,body.detopen .bigpin{opacity:0;pointer-events:none}
body.adding .bp-b,body.listopen .bp-b,body.preview .bp-b,body.viewer .bp-b,body.lantern .bp-b,body.detopen .bp-b{pointer-events:none}
.me{width:18px;height:18px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px #FFFFFF,0 0 8px rgba(17,17,17,.16)}
/* small cards never run off the top of the screen: their list scrolls */
.card{max-height:calc(var(--appvh) - env(safe-area-inset-top) - 72px - 24px - 240px - var(--cb, 0px) - var(--vs, 0px));overflow-y:auto;-webkit-overflow-scrolling:touch}

/* the word Pinpocket at the top: black, on every map and panel */
.logo,body.light-map .logo,body.listopen .logo{color:#1E1E1E}

/* ---- the white panel: black content, big text, no boxes ---- */
.form .label,.form .sect-t{font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.form .foot{border-top:0;background:#FFFFFF}
.form .btn.primary{background:#1E1E1E;color:#FFFFFF}
.form .btn.primary:disabled{background:rgba(17,17,17,.16);color:rgba(255,255,255,.72)}
/* Oct 20: the form's foot: Cancelar (white) and Guardar dica (the last chosen category's texture), both outlined in black */
.form .foot{flex-wrap:wrap;gap:16px}
.form .foot #removeBtn{flex-basis:100%}
/* Oct 20: the foot's buttons as on a place's page (Editar, Como chegar), side by side: Cancelar the smaller */
#form .foot #cancelBtn{flex:0 0 auto;padding:0 48px}
#form .foot #saveBtn{flex:1}
.form .btn.cancel,.form .btn.save{border:6px solid #1E1E1E;color:#1E1E1E;background:#FFFFFF;font-size:18px}   /* Oct 20: both lines as thick as the cursor's */
.form .btn.save{background:linear-gradient(rgba(255,255,255,var(--bveil,1)),rgba(255,255,255,var(--bveil,1))),var(--btx,none);background-size:auto,var(--bts,auto)}
.form .btn.save:disabled{background:#FFFFFF;border-color:rgba(17,17,17,.16);color:rgba(17,17,17,.55)}
.form .btn.save:not(:disabled){border:6px solid var(--fcol,#1E1E1E)}   /* Oct 20: the cursor's line, in the first category's colour */
.form .btn.secondary{background:#F2F2F2;color:#1E1E1E}
.form .round{background:#1E1E1E;color:#FFFFFF}
.title-in{color:#1E1E1E;font-size:28px;line-height:32px}
.plain-in{display:block;width:100%;padding:8px 0;border:0;outline:0;background:transparent;font:inherit;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;-webkit-appearance:none}
.plain-in::placeholder{color:#767676;font-weight:400}
/* Oct 20: the roteiro is picked from the existing ones (or a new one is named): the field opens a list upwards, outlined in black */
.rotf{position:relative}
#form .rotf{display:none}   /* Oct 20: no roteiro choice in the form: a new pin goes to the roteiro on show, an edited one stays in its own */
.rot-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 0;border:0;background:transparent;font:inherit;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rot-btn svg{flex:none;transition:transform .3s ease}
.rot-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.rot-dd{position:absolute;left:0;right:0;bottom:40px;z-index:20;background:#FFFFFF;border:0;border-radius:var(--r);padding:16px 8px;max-height:50vh;overflow-y:auto}   /* Oct 20: outlined by the panel's line, which flies to it */
@keyframes rotdd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rot-dd[hidden]{display:none}
.rot-op{display:flex;align-items:flex-start;gap:16px;width:100%;min-height:48px;padding:8px 16px;border:0;background:transparent;font:inherit;font-size:18px;line-height:32px;color:#1E1E1E;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rot-op .rd{flex:none;margin-top:4px;width:22px;height:22px;border-radius:50%;border:2px solid #1E1E1E;display:grid;place-items:center}
.rot-op.on .rd::after{content:'';width:12px;height:12px;border-radius:50%;background:#1E1E1E}
.rot-op .tx2{display:flex;flex-direction:column;gap:4px;min-width:0}
.rot-op .tx2 b{font-weight:600}
.rot-op .tx2 span{color:var(--grey);font-size:18px;line-height:32px}
.rot-new{display:flex;gap:8px;align-items:center;padding:8px 16px}
.rot-new .plain-in{flex:1;min-width:0;border-bottom:2px solid #1E1E1E}
textarea.box.addr-in{min-height:0;padding:8px 0!important}
textarea.box{background:transparent;padding:8px 48px 8px 0;font-size:18px;line-height:32px;color:#1E1E1E;border-radius:0}
textarea.box::placeholder{color:#767676}
.form .photo{border-radius:8px}
/* ---- category tiles: white, a black line, a black icon; chosen ones fill with their fluorescent texture ---- */
.cat{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:#1E1E1E;overflow:hidden}
.cat::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--c);pointer-events:none;transition:box-shadow .3s ease}
.cat.on::after{box-shadow:inset 0 0 0 6px var(--c)}
#cats .cat.on::after{box-shadow:none}   /* Oct 20: in the form the line is the panel's, not the tile's */
/* Oct 20: the category-coloured line: round the whole panel; while the name or Conta tudo is being written it moves to round that field, and back once checked */
#fring{position:absolute;z-index:6;left:0;top:0;width:100%;height:100%;border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);box-shadow:inset 0 0 0 6px var(--fcol,#1E1E1E);pointer-events:none;
  transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),border-radius .45s var(--ease),box-shadow .3s ease}
#fring.f{border-radius:var(--r)}   /* Oct 20: round the field, the panel's corners */
#fring.held{opacity:0;transition:none}
.ringed:not(.rot-dd){position:relative}
.ringed::after{content:'';position:absolute;inset:0;z-index:3;border-radius:var(--r);box-shadow:inset 0 0 0 6px var(--fcol,#1E1E1E);pointer-events:none}
#nameIn,#descIn,#descW{border-radius:var(--r)!important}
/* Oct 20: not chosen, a tile shows its texture faintly (18%) and no line; chosen, 60% and the 4px category line */
.cat::before{content:'';position:absolute;left:0;right:0;top:0;height:100%;background:var(--txg,var(--tx));background-size:var(--ts);opacity:.35;transition:opacity .35s ease}   /* Oct 20: not chosen = the texture's shape in grey */
.cat > *{position:relative}
.cat .nm{color:#1E1E1E;padding:0 8px;border-radius:4px;transition:background-color .3s ease}
.cat.on{background:#FFFFFF;color:#1E1E1E;box-shadow:none}
.cat.lift{z-index:5;transition:none!important;box-shadow:0 8px 24px rgba(17,17,17,.16)}
.cat.drop{outline:3px dashed #1E1E1E;outline-offset:-3px}
.cats .cat{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cat.nope{animation:nope .32s ease}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cat.on::before{background:var(--tx);background-size:var(--ts);opacity:var(--ta,.6)}   /* chosen: its colour, as strong as black text allows (4.5:1) */
.cat.on .nm{color:#1E1E1E;background:#FFFFFF}
.cat.on svg{background:none;padding:0}   /* no disc behind the icon: black, like the markers' */
.cat .cnt{background:#1E1E1E;color:#FFFFFF;z-index:1}
.cat.on .cnt{background:#1E1E1E;color:#FFFFFF}
.cats:not(.mini) .cat{min-height:104px;gap:8px}
.cats:not(.mini) .cat .nm{font-size:18px;line-height:32px}

/* the ground is the pin's tip: what goes below it disappears */
.bigpin{clip-path:inset(-400px -40px 0 -40px)}
.bigpin.open{clip-path:none}
.bp-wrap{position:absolute;inset:0;transition:none;transform-origin:50% 111.3px}
/* dragged: the pin leaves the ground, grows to its size on the map and floats over everything */
.bigpin.drag{clip-path:none;z-index:700}
.bigpin.drag .bp-b{cursor:grabbing}
.bp-b{touch-action:none}
.bigpin.buried .bp-wrap{transform:translateY(6px);transition:transform .22s cubic-bezier(.55,0,.75,.2)}
.bigpin.rising .bp-wrap{transform:none;transition:transform .55s cubic-bezier(.2,.75,.3,1)}

body.adding .bigpin:not(.buried){opacity:0;pointer-events:none}
body.adding .bp-b{pointer-events:none}
.plant{position:relative;width:104px;height:129px;overflow:visible;transform-origin:50% 100px}
/* the planted pin stands on a hand-drawn X lying on the ground (flattened, the line as thick as the pin's outline);
   its tail's two sides run on into the X, and the pin's white hides the X between them. The X draws itself in */
.plant .xs path{stroke-dasharray:1;stroke-dashoffset:0}
.plant.draw .xs path{animation:xdraw .3s ease-out .2s both}
.plant.draw .xs path+path{animation-delay:.42s}
@keyframes xdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.plant svg{display:block}
.toast{position:fixed;left:16px;right:16px;bottom:calc(24px + 44px + 24px + env(safe-area-inset-bottom));z-index:950;max-width:528px;margin:0 auto;padding:16px;border-radius:var(--r);background:rgba(17,17,17,.55);color:#F2F2F2;font-size:18px;line-height:32px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.toast.show{opacity:1;transform:none}
/* while searching the bar runs across the bottom: the word and the round buttons step aside */
body.dir .logo{opacity:0;pointer-events:none}
/* the shared link: the word alone, centred above the panel */
/* Oct 20: no round buttons on the right of the map */
#recenter,#catBtn,#searchBtn{display:none!important}
/* the waves' own layer: masked to the water, the pattern drifting very slowly (transform only) */
.wv{position:absolute;left:0;top:0;overflow:hidden;opacity:0;transition:opacity .3s ease;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.wv.on{opacity:1}
.wv-sea{position:absolute;left:-128px;top:-128px;right:-128px;bottom:-128px;background-size:128px 128px;will-change:transform;animation:wvdrift 40s linear infinite}
@keyframes wvdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(128px,0,0)}}
@media (prefers-reduced-motion: reduce){.wv-sea{animation:none}}
#pvX{position:fixed;z-index:870;top:calc(env(safe-area-inset-top) + 16px);right:16px;display:none}
body.preview #pvX{display:flex}
/* MapLibre's own stylesheet makes its container position:relative (height 0 here): keep it filling the map */
#map .glmap{position:absolute!important;left:-50%;top:-50%;width:200%;height:200%;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s ease}
#map .glmap.on{opacity:1}
/* the search and its results: 400px wide at most */
.bp-ls{max-width:400px;margin-left:auto;margin-right:auto}
/* Oct 20: the intro's dots are the planted pin's own (same size, place and typing as on the map); the intro's cursor: it is simply there (no entrance); every 5 s the magnifier turns on its vertical axis into the three typing dots, and back.
   The magnifier breathes a little (its lens grows slightly and settles) */
.bp-ic{perspective:240px}
.bp-ic .dt{opacity:0;transform:rotateY(-90deg)}
body.intro .bigpin.gone{opacity:1}
body.intro .bigpin.pop .bp-b,body.intro .bigpin.pop .bp-t{animation:none}
/* it just appears: a ping, growing from its tip with one small bounce, and settles (no earth, nothing else) */
body.intro .bp-wrap{animation:introPing .5s cubic-bezier(.3,1.45,.6,1) .3s both}
@keyframes introPing{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
body.intro .bp-ic .mg{transition:transform .28s cubic-bezier(.2,.7,.3,1) .28s}
body.intro .bp-ic .dt{transition:transform .28s cubic-bezier(.6,0,.8,.3),opacity 0s .28s}
body.intro .bigpin.dots .bp-ic .mg{transform:rotateY(90deg);transition:transform .28s cubic-bezier(.6,0,.8,.3)}
body.intro .bigpin.dots .bp-ic .dt{opacity:1;transform:none;transition:opacity 0s .28s,transform .28s cubic-bezier(.2,.7,.3,1) .28s}
body.intro .bp-ic .lens{transform-box:fill-box;transform-origin:center;animation:lensbreathe 1.6s ease-in-out infinite}
/* the lens grows more and its centre shifts a little as it does (organic, never quite round) */
@keyframes lensbreathe{0%,100%{transform:none}50%{transform:translate(.7px,-.6px) scale(1.24) rotate(5deg)}}
/* when the content changes (magnifier ⇄ dots), the outline gives a quick 5% pulse */
.bigpin.flippop .bp-b{animation:flippop .26s ease-out both!important}
@keyframes flippop{0%,100%{scale:1}50%{scale:1.05}}
@media (prefers-reduced-motion: reduce){body.intro .bp-ic .lens{animation:none}}
/* Oct 20: on the intro, each time the magnifier turns into the dots, the cursor's inside wears a category's texture (as on its marker, 60% on white)
   and the dots take that category's colour; back to the magnifier, it is white and black again. Categories come shuffled, none repeated until all have shown.
   One texture layer lies behind the whole cursor (bubble and tail in one shape), so the grain runs on without a seam: the bubble turns see-through,
   its outline is masked open where the tail joins (instead of the white joint covering it) and the tail shows only below the bubble */
.bp-tx{display:none}
body.intro .bp-tx{display:block;position:absolute;left:calc(50% - 52px);top:0;width:104px;height:112px;background:#FFFFFF;pointer-events:none;
  -webkit-clip-path:path('M37.5 0H66.5A37.5 37.5 0 0 1 66.5 75H37.5A37.5 37.5 0 0 1 37.5 0ZM22 37.5H82L52 111.3Z');clip-path:path('M37.5 0H66.5A37.5 37.5 0 0 1 66.5 75H37.5A37.5 37.5 0 0 1 37.5 0ZM22 37.5H82L52 111.3Z')}
/* Oct 20 (later): the texture is printed a little off register: the same shape, shifted left and down, under the black line;
   so a white sliver shows inside the line on the right and top, and the grain spills out past the line on the left and bottom. Its grain twice as big */
.bp-tx2{display:none}
body.intro .bp-tx2{display:block;position:absolute;left:calc(50% - 52px);top:0;width:104px;height:112px;pointer-events:none;transform:translate(var(--tox, -6px),var(--toy, 6px));   /* set at random each time, 6-8.5px */
  -webkit-clip-path:path('M37.5 0H66.5A37.5 37.5 0 0 1 66.5 75H37.5A37.5 37.5 0 0 1 37.5 0ZM22 37.5H82L52 111.3Z');clip-path:path('M37.5 0H66.5A37.5 37.5 0 0 1 66.5 75H37.5A37.5 37.5 0 0 1 37.5 0ZM22 37.5H82L52 111.3Z')}
body.intro .bp-tx2::after{content:'';position:absolute;left:0;top:0;width:50%;height:50%;transform:scale(2);transform-origin:0 0;background:var(--tx,none);background-size:var(--ts,auto);opacity:0;transition:opacity .28s ease}
body.intro .bigpin.tex .bp-tx2::after{opacity:.6;transition-delay:.14s}
body.intro .bp-t polygon{fill:none}
body.intro .bp-t{-webkit-clip-path:inset(37.5px 0 0 0);clip-path:inset(37.5px 0 0 0)}
body.intro .bp-b{background:transparent;box-shadow:none}
body.intro .bp-j{display:none}
body.intro .bp-b::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px #1E1E1E;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='75'%3E%3Cpath fill-rule='evenodd' d='M0 0H104V75H0Z M41.5 68H62.5L59.5 75H44.5Z'/%3E%3C/svg%3E") 0 0/104px 75px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='75'%3E%3Cpath fill-rule='evenodd' d='M0 0H104V75H0Z M41.5 68H62.5L59.5 75H44.5Z'/%3E%3C/svg%3E") 0 0/104px 75px no-repeat}
/* the dots in the category's colour, a thin white edge keeping them clear of the texture */
body.intro .bigpin.tint .bp-ic .dt circle{fill:#1E1E1E;stroke:none}   /* Oct 20 (later): the dots stay black, no edge */
/* Oct 20 (later): every panel is the add form's panel: floating white with the dot mesh, 12px from the sides and the foot, its corners, growing out of what opened it.
   The place's details, the edit, the library (opened from the name) and the other sheets all take that same shell; only their content differs */
#det,#form.page{top:auto;left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;max-height:calc(var(--appvh) - env(safe-area-inset-top) - 24px);height:calc(var(--appvh) - env(safe-area-inset-top) - 24px);   /* Oct 23: as tall as it goes: 12px above, 12px below, 12px each side */   /* Oct 22 (later): always the same height, so it always starts at the same place; what doesn't fit scrolls inside. Before: above it only the pin (the marker, 30% bigger, ~81px): 32px from the top, its tip 16px over the panel */
  
  background-color:#FFFFFF;background-image:radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px);background-size:12px 12px;border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);
  opacity:0;transform:scale(.04);transform-origin:50% 100%;transition:transform .5s var(--ease),opacity .35s ease,visibility 0s .5s}
#det.open,#form.page.open{opacity:1;transform:none;transition:transform .5s var(--ease),opacity .35s ease,visibility 0s}
#det .foot{padding-bottom:24px}
/* the same round black X as the form */
/* Oct 20 (later): the panels' X is our X alone (two strokes, one a little longer), black, no disc; it turns as its panel closes */
.form .xbtn,.lib .xbtn,.dirp .xbtn,.vpanel .xbtn,.card .xbtn,#det .dx,#form.page #formX{width:44px;height:44px;border-radius:0;background:transparent!important;color:var(--fcol,#1E1E1E)!important;box-shadow:none;transition:color .3s ease}   /* Oct 20: every panel's X in the panel's category colour (black with none) */
#det .dx{top:16px;right:16px}
#det .dname{margin-top:-16px;padding-right:48px}   /* Oct 20: its first line centred on the X (X centre 38px down) */
.form .xbtn svg,.lib .xbtn svg,.dirp .xbtn svg,.vpanel .xbtn svg,.card .xbtn svg,#det .dx svg,#form.page #formX svg{width:28px;height:28px}
/* Oct 20: THE X, the same everywhere in the app: the existing two-stroke drawing, black, bare (no disc), no focus or press highlight; tapped, it turns 180° */
.turn.spin svg{transform:rotate(180deg)!important;transition:transform .5s var(--ease)!important}
.xbtn,.dx,#bpX,#routeX,#pvX{-webkit-tap-highlight-color:transparent;outline:none!important;box-shadow:none!important}
.xbtn:focus,.xbtn:focus-visible,.dx:focus,.dx:focus-visible,#bpX:focus,#bpX:focus-visible,#routeX:focus,#routeX:focus-visible,#pvX:focus,#pvX:focus-visible{outline:none!important}
.xbtn.down,.dx.down,#routeX.down,#pvX.down,.xbtn:active,.dx:active{transform:none!important;background:transparent!important}
#routeX,#pvX{background:transparent!important;color:#1E1E1E!important;width:44px;height:44px;border-radius:0}
#routeX svg,#pvX svg{width:28px;height:28px}
/* the library and the friend's list: the same shell, rising from the name at the foot */
.lib{top:auto;height:min(66vh, calc(var(--appvh) - env(safe-area-inset-top) - 96px));background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform-origin:50% 100%}
/* the small sheets too: directions, the shared link's panel, the cards */
.dirp,.vpanel,.card,.omenu{background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.dirp,.vpanel{border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot)}
/* photos edge to edge of the panel now (not of the screen) */
.form .pmos{width:calc(100% + 32px);margin-left:-16px}
/* Oct 20: the search, once open, sits above everything on the screen (markers, edge pins, the name, events) */
.bigpin.open,body.searching .bigpin{z-index:940}
/* the place's name on its category's texture, at half strength (a white veil over it) */
#descIn{background:linear-gradient(rgba(255,255,255,var(--nveil,.34)),rgba(255,255,255,var(--nveil,.34))),var(--ntx,none);background-size:auto,var(--nts,auto);border-radius:0;padding:16px 48px 16px 16px;margin-left:0;width:100%;transition:background .3s ease}
#nameIn{background:linear-gradient(rgba(255,255,255,var(--nveil,.34)),rgba(255,255,255,var(--nveil,.34))),var(--ntx,none);background-size:auto,var(--nts,auto);border-radius:0;padding:16px;margin-left:0;width:100%;transition:background .3s ease}
/* held until the version check is done: nothing of the intro shows or moves yet */
/* Oct 20: while the version is checked the screen is plain white: the intro's white covers everything (no map, no markers), only its drawing waits */
html.pfhold #intro>*,html.pfhold .bigpin{visibility:hidden}
html.pfhold #intro{visibility:visible;z-index:2000;background:#FFFFFF}
html.pfhold .bp-wrap,html.pfhold .bp-ic *{animation-play-state:paused!important}
/* the photos' empty tile (the grey +) on the same texture as the name and description, square */
#photos .t.add{display:grid;place-items:center;background:linear-gradient(rgba(255,255,255,var(--nveil,.34)),rgba(255,255,255,var(--nveil,.34))),var(--ntx,#F2F2F2);background-size:auto,var(--nts,auto);border-radius:0}
/* Oct 20: every panel has 16px of padding all round */
.form-body,#det .form-body,.lib-list,#vlist .lib-list{padding:16px}
.foot,.form .foot,#det .foot{padding:16px}
.vpanel,.dirp{padding:16px}
#form .hd{top:-16px;margin:-16px -16px 0;padding:16px 48px 16px 16px}
#det .dname{margin-top:-8px}
#det .ddist{margin:0;padding:0 16px}
/* Oct 20: panels drawn with the 6px line keep 16px clear inside the line (22px from the edge) */
#form .form-body,#det .form-body{padding:24px}
#form .foot,#det .foot{padding:16px 24px 24px}
#form .hd{top:-22px;margin:-24px -24px 0;padding:24px 48px 16px 24px}
#det .dname{margin-top:-16px}
/* the roteiros list: no name or X at the foot; its own row on top (add a roteiro, the X), the backup folded at the very end */   /* Oct 20: the roteiro's name stays exactly where it is while the list is open: no move, no fade */
.rot-add{flex:1;display:flex;align-items:center;gap:16px;min-height:72px;padding:16px 24px;border:0;border-radius:var(--r);background:#F2F2F2;color:#1E1E1E;font:inherit;font-size:18px;line-height:32px;text-align:left;cursor:pointer}
.rot-add svg{flex:none}
/* Oct 20: every panel's foot follows the phone's rounded screen corners (screen radius minus the 12px it sits in) */
.form,#det,.lib,.vpanel,.dirp{border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot)}
/* Oct 20: the roteiros list, tighter */
.pcard.rotc{align-items:flex-start;min-height:0;padding:16px 24px}
.pcard.rotc .rarr{margin-top:4px}
.pcard.rotc .tx{gap:4px}
.pcard.rotc .annot{font-size:18px;line-height:32px}
.rot-add{flex:none;width:100%;justify-content:center;min-height:56px;padding:0}
.rt-nm{cursor:text}
/* Oct 20: the roteiros list's foot: Pré-visualizar, then Partilhar roteiro, each across the panel */
/* Oct 20: every panel alike: the X 16px from the top and the right, the title 16px from the left, its first line centred on the X */
#form .hd{padding:8px 48px 16px 16px}
#nameIn{padding-left:0}
#det .dname{padding-left:0;margin-left:-8px}
/* Oct 20: a shared roteiro (and its preview): its name where the sender left it, and under it who shared it */
.logo.by{flex-direction:column;align-items:center;gap:4px}
.logo.by.al-l{align-items:flex-start}.logo.by.al-r{align-items:flex-end}
.lg-by{font-style:normal;font-size:18px;line-height:32px;color:#1E1E1E;pointer-events:none}
.lg-by b{font-weight:600}
.lg-by[hidden]{display:none}
/* Oct 20: the friend's list, as the rest of the app now: white cards on the panel's dots, no shadow, no tint; the photos edge to edge; the marker as on the map */
.vcards{gap:16px;margin-top:16px}
.vc{background:#FFFFFF;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(17,17,17,.16);color:#1E1E1E}
.vc .pmos{width:100%;margin:0}
.vc .pmos .row,.vc .pmos .row.one{height:200px}
.vc .bd{gap:0;padding:16px}
.vc .vh{display:flex;align-items:center;gap:16px}
.vc .vh .pmk{flex:none}
.vc .vh .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.vc .title-s{font-size:18px;line-height:32px;overflow-wrap:anywhere}
.vc .annot{color:#1E1E1E}
.vc .ds{margin-top:16px;font-size:18px;line-height:32px;color:#1E1E1E}
.vl-hd .title-m{font-size:28px;line-height:32px;overflow-wrap:anywhere}
.vl-hd .vl-t{margin:0;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;overflow-wrap:anywhere}
.vl-hd .annot{margin:4px 0 0;color:#1E1E1E;font-size:18px;line-height:32px;font-weight:400}   /* Oct 21: plain text, the numbers semibold (two sizes in this panel) */
.vl-hd .annot b{font-weight:600}
/* Oct 21 (review): the friend's list: no empty strip at the foot (the name is no longer there), the end clear of the map/list button and 56px+ of air; the panel starts 24px under who shared it */
#vlist .lib-hd{display:none}
#vlist .lib-list,#vlist #vcards{padding:24px 24px 128px}
/* Oct 21 (review): the app's own bottom sheet for questions (instead of the phone's grey boxes): a grabber, the title on the left, full-width buttons */
.ask-sh{position:fixed;inset:0;z-index:1500;background:rgba(17,17,17,.16);opacity:0;pointer-events:none;transition:opacity .3s ease}
.ask-sh.open{opacity:1;pointer-events:auto}
.ask{position:fixed;z-index:1501;left:12px;right:12px;bottom:12px;max-width:536px;margin:0 auto;padding:0 16px 16px;border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);
  background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;transform:translateY(calc(100% + 24px));transition:transform .45s var(--ease);touch-action:none}
.ask.open{transform:none}
.ask .grab{display:flex;justify-content:center;align-items:center;width:100%;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
.ask .grab::before{content:'';width:40px;height:5px;border-radius:3px;background:#767676}
.ask h2{margin:0;font-size:28px;line-height:32px;font-weight:600;color:#1E1E1E;overflow-wrap:anywhere}
.ask p{margin:4px 0 0;font-size:18px;line-height:32px;color:#1E1E1E}
.ask .plain-in{margin-top:16px;padding:16px 0;font-size:18px;line-height:32px;border-bottom:2px solid #1E1E1E;-webkit-user-select:text;user-select:text}
.ask .acts{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.ask .acts.row{flex-direction:row-reverse}   /* the main choice on the right */
.ask .acts.row .btn{flex:1;min-width:0}
.ask .btn{flex:none;width:100%}
.ask .btn.primary{background:#1E1E1E;color:#FFFFFF}
.ask .btn.secondary{background:#F2F2F2;color:#1E1E1E}
.ask .btn:disabled,.ask .btn.remove:disabled{background:var(--red-tint);color:var(--red);opacity:.4;cursor:default}   /* asleep until the word is typed */
/* Oct 21: the menu, top right: a panel like the others, sliding in from the right; you up top, the roteiro's actions and the roteiro itself at the foot (in the thumb's reach) */
#menuBtn{position:fixed;z-index:845;top:calc(env(safe-area-inset-top) + 28px);right:28px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
body.intro #menuBtn,body.searching #menuBtn,body.detopen #menuBtn,body.adding #menuBtn,body.preview #menuBtn,body.viewer #menuBtn,body.lantern #menuBtn,body.dir #menuBtn,body.sideopen #menuBtn{opacity:0;pointer-events:none}

.side{position:fixed;z-index:880;top:calc(env(safe-area-inset-top) + 12px);right:12px;bottom:12px;width:min(336px, calc(100vw - 72px));display:flex;flex-direction:column;padding:8px 16px 16px;border:6px solid var(--sc,#1E1E1E);
  border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;
  transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.side.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
/* Oct 22: the outline is the panel's own border, so it holds the whole screen height even when the content scrolls (was a layer that scrolled away) */
.side{transition:transform .5s var(--ease),visibility 0s .5s,border-color .3s ease}
.side.open{transition:transform .5s var(--ease),visibility 0s,border-color .3s ease}
.side-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.side-top .xbtn{position:static;flex:none;margin-right:-8px;width:44px;height:44px;border-radius:0;background:transparent!important;color:#1E1E1E!important;box-shadow:none}
.side-top .xbtn svg{width:28px;height:28px}
.who{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px 0 0;border:0;background:transparent;text-align:left;color:#1E1E1E;font:inherit}
.side-nm{font-size:28px;line-height:32px;font-weight:600;overflow-wrap:anywhere}
.ava{flex:none;width:44px;height:44px;margin-top:8px;padding:0;border:0;border-radius:50%;background:#1E1E1E center/cover no-repeat;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font:inherit;font-size:18px;font-weight:600;line-height:1}   /* the size of the round X */
.ava.ph span{display:none}
.side-city{margin:8px 0 0;color:#1E1E1E;font-size:18px;line-height:32px}
.side-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.side-list .pcard.rotc{width:100%}
/* Oct 21: in the menu, a roteiro's name reads like "Os meus roteiros" and its line like the city above */
.side-list .pcard.rotc .title-s{font-size:18px;line-height:32px;font-weight:600}
.side-list .pcard.rotc .annot{font-size:18px;line-height:32px}
.side-rot{margin-top:auto;padding-top:48px;display:flex;flex-direction:column;gap:16px}
.side-rot .btn{flex:none;width:100%}
.side-rot .btn.secondary{background:#F2F2F2;color:#1E1E1E}
.side-rot .btn:disabled{background:#F2F2F2;color:#1E1E1E;opacity:.4}
/* Oct 21: listening: the mic loses its disc (bare, black) and grows a little, breathing slowly; its field lights up as if tapped (the ring, no texture) */
.form .mic.on,.mic.on{background:transparent!important;color:#1E1E1E!important;box-shadow:none;animation:micb 1.6s ease-in-out infinite}
.mic svg{transition:transform .3s var(--ease)}
.mic.on svg{transform:scale(1.4)}
/* Oct 23: the microphone sits at the top right of Conta tudo, on the title's line, outside the box: the icon alone, black, no disc */
.mic.mic-top{position:absolute;right:-10px;top:calc(24px + 13px);margin-top:-24px;bottom:auto;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;color:#1E1E1E!important;display:flex;align-items:center;justify-content:center;z-index:2}
#descIn{padding-right:0!important}
.desc.ed #descIn{padding-right:96px!important}
@keyframes micb{0%,100%{opacity:1}50%{opacity:.45}}
/* Oct 21: ONE button text, everywhere in the app: the add/edit pin form's (Figtree, 18px, semibold); every text button and menu action inherits it */
.btn,a.btn,.omenu button{font-family:Figtree,system-ui,sans-serif;font-size:18px;font-weight:600;line-height:32px;letter-spacing:0}
.logo:not(.free){padding:0 48px;top:max(var(--lgy, calc((env(safe-area-inset-top) + 25%) / 2 - 31px)), calc(env(safe-area-inset-top) + 80px))}   /* Oct 21: the name starts under the top row of buttons (8px clear) */
/* Oct 21: the name is the map/list switch: on its left the icon of what is showing (the map, or the list), sized to the letters, on the first line */
.logo .tap{gap:16px}
body.viewer #viewBtn,body.preview #viewBtn{display:none}   /* the name does it now */
/* Oct 21: the circle on your name's line, the city under your name (saves height) */
.side-top{align-items:center;gap:16px}
.side-top .ava{margin-top:0}
.who-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.who-c .who{padding:0}
.who-c .side-city{margin:0}
.side-top .xbtn{align-self:flex-start}
/* Oct 21: each card in its category's line (the markers' 4px); held, it lifts and follows the finger */
.vc{box-shadow:inset 0 0 0 4px var(--c,#1E1E1E);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .3s var(--ease),opacity .45s var(--out)}
.vc .pmos{width:calc(100% - 8px);margin:4px 4px 0}
.vcards.dragging .vc,#vcards.dragging .vc{transition:transform .25s var(--ease)}
.vc.drag{z-index:5;transition:none!important;box-shadow:inset 0 0 0 4px var(--c,#1E1E1E),0 8px 24px rgba(17,17,17,.16)}
/* Oct 21: list cards folded: marker + name on one row, the expander on the right; open, the details unfold under it */
.vc .vrow{display:flex;align-items:center;gap:8px;padding:16px 16px 16px 16px}
.vc .vmain{flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:0;border:0;background:transparent;text-align:left;color:#1E1E1E;font:inherit}
.vc .vmain .title-s{font-size:18px;line-height:32px;overflow-wrap:anywhere}
.vc .vexp{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center}
.vc .vexp svg{transition:transform .4s var(--ease)}
.vc.open .vexp svg{transform:rotate(180deg)}
.vc .vmore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.vc.open .vmore{grid-template-rows:1fr}
.vc .vin{overflow:hidden;min-height:0;padding:0 16px}
.vc.open .vin{padding-bottom:16px}
.vc .vin .annot{margin:0 0 4px;font-size:18px;line-height:32px;color:#1E1E1E}
.vc .vin .ds{margin:0;font-size:18px;line-height:32px;color:#1E1E1E}
.vc .vin .pmos{width:calc(100% + 24px);margin:16px -16px 0;gap:4px}   /* Oct 21: as on the pin's page */
.vc .vin .pmos .row{gap:4px;height:200px}
.vc .vin .pmos .row.one{height:240px}
.vc .vin .pmos .t{border-radius:0;box-shadow:none}
.vc .vin .pmos:first-child{margin-top:0}
.side-add{flex:none;width:100%;min-height:56px;justify-content:flex-start;gap:16px;padding:0 24px;font-size:18px;line-height:32px;font-weight:600}
/* Oct 21: a pin's photos, full screen: a carousel on black, starting at the photo tapped, the pin's category line all round (following the screen's corners) */
#pv{position:fixed;inset:0;z-index:1400;background:#FFFFFF;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
#pv.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
#pv::after{content:'';position:absolute;inset:0;border-radius:55px;box-shadow:inset 0 0 0 6px var(--pvc,#FFFFFF);pointer-events:none;z-index:2}
.pv-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pv-track::-webkit-scrollbar{display:none}
.pv-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#pvClose{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + 16px);right:16px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center}
.pmos .t[data-pv]{cursor:zoom-in}
/* Oct 21: white now; "3 de 5" up top on the X's line, the dots at the foot */
.pv-track{top:0;bottom:0}   /* Oct 21: the photo fills the screen; the controls sit over it */
.pv-n{position:absolute;z-index:3;left:72px;right:72px;top:calc(env(safe-area-inset-top) + 16px);margin:0;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:32px;font-weight:400;color:var(--pvt,#1E1E1E);pointer-events:none;transition:color .3s ease}
.pv-dots{position:absolute;z-index:3;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 24px);display:flex;justify-content:center;gap:8px}
.pv-dots i{width:8px;height:8px;border-radius:50%;background:var(--pvb,#1E1E1E);transition:background .3s ease}
.pv-dots i.on{background:var(--pvc,#1E1E1E)}   /* the photo's one in the pin's colour, the others black or white, whichever reads on the photo */
#pvClose{color:var(--pvx,#1E1E1E)!important;transition:color .3s ease}
/* Oct 21: a pin's photos in its cards: each its own rounded tile with the pin's line, 8px apart; a lone last one takes the whole row */
.pmos .row{padding:0;border:0;min-height:0}   /* Oct 21: a mosaic's row is not a list row (no padding, no divider) */
.pv-ghost{position:fixed;z-index:1401;left:0;top:0;background:#FFFFFF center/cover no-repeat;pointer-events:none}
@keyframes bphop{0%{transform:translateY(0)}45%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes bpfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bigpin.hop:not(.open):not(.drag):not(.buried) .bp-b,.bigpin.hop:not(.open):not(.drag):not(.buried) .bp-t{animation:pinin .45s var(--out),bphop .6s var(--ease) .45s,bpfloat 2.8s ease-in-out 1.05s infinite}
/* Oct 21: map/list: centred on the top row, on the menu button's (and the X's) line, the X's size */
#viewTog{position:fixed;z-index:845;top:calc(env(safe-area-inset-top) + 28px);left:50%;margin-left:-24px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
#viewTog .vt-l,body.listopen #viewTog .vt-m{display:none}
body.listopen #viewTog .vt-l{display:block}
body.intro #viewTog,body.searching #viewTog,body.detopen #viewTog,body.adding #viewTog,body.lantern #viewTog,body.dir #viewTog,body.sideopen #viewTog{opacity:0;pointer-events:none}
/* Oct 21: THE panel X: 8px from the panel's top and right, in every panel (no longer on the title's line) */
#catX,#dirX,#formX,#sideX,#vX,#det .dx,#form.page #formX{position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;margin:0!important;z-index:8}
.side-top .who-c{padding-right:48px}
.card .ct{padding-right:48px}
/* the pin's name: while you type, 16px clear of the field's line; back when done */
#nameIn{transition:padding .3s var(--ease),background .3s ease}
#nameIn:focus{padding-left:24px}
/* while the name is being written the form's X leaves: it turns a full circle as its strokes shrink to a dot in the middle and go; it comes back the same way */
#formX svg{transition:transform .5s var(--ease)}
#formX svg path{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dasharray .45s var(--ease),stroke-dashoffset .45s var(--ease)}
#formX{transition:opacity .15s ease .05s}
#form.naming #formX{opacity:0;pointer-events:none;transition:opacity .15s ease .4s}
#form.naming #formX svg{transform:rotate(360deg)}
#form.naming #formX svg path{stroke-dasharray:0 1;stroke-dashoffset:-.5}
#sideX{color:var(--sc,#1E1E1E)!important;transition:color .3s ease}
/* Oct 21: the pin panel's button bar (edit and view): white glass, no line of its own; the panel's line runs round it, a line of that colour on its top */
#form .foot,#det .foot{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:2px solid var(--fcol,#1E1E1E);border-radius:0 0 var(--r-foot) var(--r-foot)}
#form .form-body,#det .form-body{padding-bottom:calc(var(--fh, 96px) + 24px)!important}
/* list items: the category line drawn above everything inside (so the bar sits within it) */
.vc{box-shadow:none}
.vc::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 4px var(--c,#1E1E1E);pointer-events:none;z-index:3}
.vc.drag{box-shadow:0 8px 24px rgba(17,17,17,.16)}
.vc .vfoot{display:flex;gap:16px;margin:16px -16px -16px;padding:16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:2px solid var(--c,#1E1E1E);border-radius:0 0 var(--r) var(--r)}
.vc .vfoot .vedit{flex:1;background:#1E1E1E;color:#FFFFFF}
/* Oct 21: thin separators (2px, the panel's colour), edge to edge inside its line: under the title, then before every section's title */
#form .field,#det .field{position:relative;margin-top:16px;padding-top:24px}
#form .field.first,#det .field.first{margin-top:16px}
#form .field::before,#det .field::before{content:'';position:absolute;top:0;left:-22px;right:-22px;height:2px;background:var(--fcol,#1E1E1E);pointer-events:none}
/* the list's open item: the same line under its title row */
.vc.open .vrow{box-shadow:inset 0 -2px 0 var(--c,#1E1E1E)}
.vc.open .vin{padding-top:16px}
/* the menu too: a separator under your name (before Os meus roteiros) and before the actions, in the roteiro's colour */
.side-rot::before{content:'';position:absolute;top:0;left:-16px;right:-16px;height:2px;background:var(--sc,#1E1E1E);pointer-events:none;transition:background .3s ease}
.side-rot{position:relative;margin-top:auto;padding-top:24px}
.side-list{margin-bottom:48px}
/* Oct 21: ONE distance between a title and its text (or description), everywhere: the roteiro cards' (2px between the boxes, about 8px between the letters) */
.hd .annot,.vpanel .annot,#catCard .annot,.vl-hd .annot,.ask p{margin-top:4px!important}
.pcard .tx,.pcard.rotc .tx,.dirp .tx,.rot-op .tx2,.vc .vh .tx,.who,.who-c{gap:4px!important}
#det .dname{padding-bottom:8px}
#det .ddist{margin-top:0}
/* Oct 21: the X's own motion (see XS in the script) */
.xa svg{transition:transform .3s var(--ease)!important;transform:none}
.xa svg path{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dasharray .3s var(--ease),stroke-dashoffset .3s var(--ease)}
.xa.xgone svg{transform:rotate(360deg)!important}
.xa.xgone svg path{stroke-dasharray:0 1;stroke-dashoffset:-.5}
.xa.xnow svg,.xa.xnow svg path{transition:none!important}
/* Oct 21: 16px between the items of a list, always (cards, roteiros, pins, steps) */
.side-list,.cards,.cards.rcards,.vcards,.steps{gap:16px!important}
/* Oct 21: 16px between a title and its content (a description keeps its own 2px): sections (O que se faz aqui?, Conta tudo, fotos, roteiro), list heads, the roteiros list, dialogs */
.field{gap:16px!important}
.vcards,.steps{margin-top:16px!important}
.side-list{margin-top:16px!important}
.ask .plain-in{margin-top:16px}
/* Oct 21: the menu's roteiro cards: ⋮ on the right of the title line; it unfolds the card with Pré-visualizar, Partilhar, Mudar nome, Eliminar on a glass bar */
#sideRot:empty{display:none}
.sidec{flex-direction:column;align-items:stretch!important;padding:0!important;overflow:visible}   /* Oct 23: not clipped, so the off-register texture shows past the line, as on the markers */
.sidec .sc-more,.sidec .sc-in{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.sidec .sc-row{display:flex;align-items:flex-start;gap:8px;padding:16px 8px 16px 24px}
.sidec .sc-main{flex:1;min-width:0;padding:0;border:0;background:transparent;text-align:left;color:#1E1E1E;font:inherit}
.sidec .sc-kb{flex:none;width:44px;height:44px;margin:-8px 0 -8px;padding:0;border:0;border-radius:50%;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center}
.sidec .sc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.sidec.open .sc-more{grid-template-rows:1fr}
.sidec .sc-in{overflow:hidden;min-height:0}
.sidec .sc-acts{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:2px solid var(--rc,#1E1E1E)}
.sidec:not(.on) .sc-acts{border-top-color:#767676}
/* Oct 21: a list of actions, as ghost buttons (text only, no fill); Eliminar in red */
.sidec .sc-acts{gap:0!important;padding:8px 0!important}
.sidec .sc-acts .btn{flex:none;width:100%;height:48px;padding:0 24px;justify-content:flex-start;border-radius:0;background:transparent!important;color:#1E1E1E}
.sidec .sc-acts .btn.remove{color:var(--red)}
.sidec .sc-acts .btn:disabled{opacity:.4}
/* the menu button's motion: lines together first, then the dot; back: the dot grows first, then the lines part */
#menuBtn path{stroke-dasharray:1 1;stroke-dashoffset:0;transform:none;transition:stroke-dasharray .15s var(--ease),stroke-dashoffset .15s var(--ease),transform .15s var(--ease) .15s}
#menuBtn.hb-go path{stroke-dasharray:0 1;stroke-dashoffset:-.5;transition:transform .15s var(--ease),stroke-dasharray .15s var(--ease) .15s,stroke-dashoffset .15s var(--ease) .15s}
#menuBtn.hb-go .h1{transform:translateY(5.5px)}
#menuBtn.hb-go .h3{transform:translateY(-5.5px)}
#vlist::after{content:'';position:absolute;inset:0;z-index:9;border-radius:inherit;box-shadow:inset 0 0 0 6px var(--vc,#1E1E1E);pointer-events:none}   /* Oct 21: as the menu and the roteiros list */
/* Oct 21: roteiro cards and pin cards: 16px top and bottom */
.sidec .sc-row{padding-top:16px!important;padding-bottom:16px!important}
.pcard.rotc:not(.sidec){padding-top:16px!important;padding-bottom:16px!important}
.vc .vrow{padding-top:16px!important;padding-bottom:16px!important}
.sidec .sc-row{align-items:center}
.sidec .sc-kb{margin:0!important}   /* Oct 21: the ⋮ centred on the card's height */
/* Oct 21: operations split: consuming first (Como chegar, primary, full width); editing under a separator (Editar pin, grey, full width) — Eliminar is inside editing */
#det .foot{flex-direction:column!important;gap:16px}
#det .foot .btn,#det .foot #detEdit,#det .foot #detGo{flex:none!important;width:100%;padding:0 24px}
#det .foot .fed{margin:0 -24px;padding:16px 24px 0;border-top:2px solid var(--fcol,#1E1E1E)}
#det .foot .fed[hidden]{display:none}
.vc .vfoot{flex-direction:column;gap:16px}
.vc .vfoot .btn{flex:none!important;width:100%;padding:0 24px}
.vc .vfoot .vgo{background:#1E1E1E;color:#FFFFFF}
.vc .vfoot .fed{margin:0 -16px;padding:16px 16px 0;border-top:2px solid var(--c,#1E1E1E)}
.vc .vfoot .vedit{background:#F2F2F2;color:#1E1E1E}
/* the distance under the pin's name starts where the name does */
#det .ddist{padding-left:0!important;margin-left:-8px!important}
#det .daddr + .ddist{margin-top:0}
/* Oct 21: between photos, no white gap: a 4px line in the panel's colour, only where two photos meet (a lone photo below gets a line only its own width) */
.pmos,.pmos .row,.vc .vin .pmos,.vc .vin .pmos .row{gap:0!important}
.pmos{--mc:var(--fcol,#1E1E1E)}
.vc .pmos{--mc:var(--c,#1E1E1E)}
.pmos .t{box-sizing:border-box}
.pmos .row .t + .t{border-left:2px solid var(--mc)!important}
.pmos .row + .row .t{border-top:2px solid var(--mc)!important}
.vc .vin .pmos{border-bottom:2px solid var(--c,#1E1E1E)}   /* Oct 21: a separator under the photos, before where it is */
.vc .vmain .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Oct 21: the pins list: an X like every panel's, and it slides up from the foot (no growing) */
#vlistX{position:absolute!important;top:8px!important;right:8px!important;z-index:10;width:44px;height:44px;border-radius:0;background:transparent!important;color:var(--vc,#1E1E1E)!important;box-shadow:none}
#vlistX svg{width:28px;height:28px}
#vlist .vl-hd{padding-right:48px}
#vlist{transform:translateY(calc(100% + 24px));opacity:1;transition:transform .5s var(--ease),visibility 0s .5s}
#vlist.open{transform:none;transition:transform .5s var(--ease),visibility 0s}
/* the map/list switch's icon about 32% bigger */
#viewTog svg{width:37px;height:37px}
/* Oct 21: the card's own 16px gap was adding to its header (and to every folded card's foot): gone, so the header is 16px top and bottom */
.sidec{gap:0!important}
/* a card unfolded without being the chosen one gets the light grey line of the unchosen */
.sidec.open:not(.on){--rc:#767676!important}
.sc-kb circle{transform-box:fill-box;transform-origin:center}
/* Oct 22: tapped (1s): the dots grow 20% and part a little, then gather quickly into the middle one, back at their size, and part again to their places */
.sc-kb.kb-go circle:nth-child(1){animation:kbUp 1s cubic-bezier(.45,0,.25,1)}
.sc-kb.kb-go circle:nth-child(2){animation:kbMid 1s cubic-bezier(.45,0,.25,1)}
.sc-kb.kb-go circle:nth-child(3){animation:kbDn 1s cubic-bezier(.45,0,.25,1)}
.sc-kb.kb-go{transform:none!important}
@keyframes kbUp{0%{transform:none}25%{transform:translateY(-3px) scale(1.2)}45%{transform:translateY(7px)}55%{transform:translateY(7px)}100%{transform:none}}
@keyframes kbMid{0%{transform:none}25%{transform:scale(1.2)}45%,100%{transform:none}}
@keyframes kbDn{0%{transform:none}25%{transform:translateY(3px) scale(1.2)}45%{transform:translateY(-7px)}55%{transform:translateY(-7px)}100%{transform:none}}
   /* Oct 21: when the photos come last, the last photo meets the bar's separator (no margin under it) */
#det .ddist{font-size:18px!important;line-height:32px!important;color:#1E1E1E}   /* the same text as the list's head */
/* Oct 21: consuming (a friend's link, and its preview): a white glass panel at the foot of the map, made in Pinpocket, get the app */
.getapp{position:fixed;z-index:790;left:40px;right:40px;bottom:56px;max-width:480px;margin:0 auto;padding:16px;border-radius:var(--r) var(--r) var(--r-foot) var(--r-foot);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 0 0 1px rgba(17,17,17,.16);display:none}
body.viewer .getapp,body.preview .getapp{display:block}
body.listopen .getapp,body.detopen .getapp,body.dir .getapp{display:none}
.ga-top{display:flex;align-items:center;gap:16px}
.ga-ic{flex:none;width:40px;height:40px;border-radius:9px;box-shadow:0 0 8px rgba(17,17,17,.16)}   /* Oct 21: a soft shadow all round (0 0) so the icon stands off the glass */
.ga-t{margin:0;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.ga-t span{font-weight:400;color:#1E1E1E}
.ga-st{display:flex;gap:8px;margin-top:8px}
.ga-st .btn{flex:1;height:40px;padding:0 16px;background:#1E1E1E;color:#FFFFFF;text-decoration:none}
.getapp{border-radius:24px}   /* discreet: about half the screen's last quarter */
.pcard.rotc:not(.on){--rc:#767676!important}   /* Oct 21: every roteiro card has its line: the chosen one in its colour, the others light grey (folded or open) */
/* Oct 21: the pins list's head stays put (name and count, with the X): white glass, a separator under it; the cards scroll beneath */
#vlist #vcards{padding-top:0!important}
#vlist .vl-hd{position:sticky;top:0;z-index:5;margin:0 -24px 16px;padding:24px 48px 16px 24px!important;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:2px solid var(--vc,#1E1E1E)}
#vlist .vcards{margin-top:0!important}
.ask #askIn2{margin-top:16px}
/* Oct 21: the stores' official badges, untouched (no link yet: the app isn't published); a note says it is coming; until the files are in, the plain buttons stand in */
.ga-st{align-items:center}
.ga-b{flex:1;display:flex;justify-content:center;min-width:0}
.ga-b img{display:block;height:40px;width:auto;max-width:100%}
.ga-b .btn{display:none}
.ga-b.nofile img{display:none}
.ga-b.nofile .btn{display:flex;width:100%}
.ga-soon{margin:8px 0 0;text-align:center;font-size:14px;line-height:16px;color:#1E1E1E}
/* Oct 21: the pin's page: its name alone in a fixed white-glass head (with the X), a separator under it; the address and distance come after */
#det .dname{position:sticky;top:-22px;z-index:7;margin:-24px -24px 16px!important;padding:24px 48px 16px 16px!important;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:2px solid var(--fcol,#1E1E1E)}
#det::after{z-index:9!important}   /* the panel's line over its fixed head */
#det .dx{z-index:10!important}
/* Oct 21: the list item's open body is the pin page's, in its order and styles */
.vc{overflow:clip}
.vc.open .vrow{position:sticky;top:var(--vlh,90px);z-index:4;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--r) var(--r) 0 0}
.vc .vin .ddist{margin:0;font-size:18px;line-height:32px;color:#1E1E1E}
.vc .vin .ddist + .ddist{margin-top:4px}
.vc .vin .field{position:relative;display:flex;flex-direction:column;gap:16px;margin-top:16px;padding-top:16px}
.vc .vin .field::before{content:'';position:absolute;top:0;left:-16px;right:-16px;height:2px;background:var(--c,#1E1E1E)}
.vc .vin .label{font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.vc .vin .ddesc{padding:0;font-size:18px;line-height:32px}
.vc .vin .pmos{border-bottom:0!important;margin:0 -16px!important}
.vc .vin .fph{padding-bottom:0}
.vc .vin .fph + .vfoot{margin-top:0!important}
.vc .vin .dcats{margin:0}
/* Oct 21: the open card's line above its fixed row */
.vc::after{z-index:6!important}
/* the map/list switch: 20% bigger again; the map drawn on white (no map lines through it); the two icons turn into each other in 0.3s (the X's and the menu's time) */
#viewTog svg{width:44px!important;height:44px!important;position:absolute;left:50%;top:50%;margin:-24px 0 0 -24px;display:block!important;transition:opacity .3s var(--ease),transform .3s var(--ease)}
#viewTog .vt-m path{fill:#FFFFFF}
#viewTog .vt-l{opacity:0;transform:rotate(-90deg) scale(.4)}
body.listopen #viewTog .vt-m{opacity:0;transform:rotate(90deg) scale(.4)}
body.listopen #viewTog .vt-l{opacity:1;transform:none}
#vlist .vl-hd{z-index:20!important}   /* the list's head above every card's own layers */
#vlist::after{z-index:30!important}   /* the panel's line over its fixed head */
#vcards.vlock{overflow:hidden!important}
   /* room below, so any pin can rise to the top */
.vc.open .vin{overflow:visible}
.vc.open .vrow{position:relative!important;top:auto!important}   /* the row needs no sticking now: the open pin itself stays put */
#vlistX{z-index:40!important}
/* the first block right under a head needs no separator of its own (the head has one) */
#det .dname + .field::before,.vc .vin > .field:first-child::before{display:none}
#det .dname + .field{margin-top:0!important;padding-top:0!important}
.vc .vin > .field:first-child{margin-top:0;padding-top:0}
.floc{position:relative;gap:4px!important;padding-right:48px}
.floc .ddist{margin:0!important}
.cpy{position:absolute;right:-6px;bottom:-10px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center}
#det .floc .ddist{margin-left:0!important}
#det .ddesc{padding:0!important}   /* the text lines up with its section's title */
body.viewer .logo .tap,body.preview .logo .tap{pointer-events:auto!important}
/* Oct 21: the preview (only yours, never in a shared link): a plain button to leave it, under the top row, centred; white glass with a black line; the X goes */
body.preview #pvX{display:none!important}
#pvClose2{display:none;position:fixed;z-index:846;top:calc(env(safe-area-inset-top) + 24px);right:16px;flex:none;width:auto;height:52px;gap:8px;padding:0 24px 0 16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:2px solid #1E1E1E;color:#1E1E1E;white-space:nowrap}
body.preview #pvClose2{display:flex}
body.preview.listopen #pvClose2,body.preview.detopen #pvClose2,body.preview.dir #pvClose2{display:none}
/* Oct 21: list view: no panel — the list's head and its cards sit right over the map, which stays usable (pan, zoom) with its pins hidden; drag between cards moves the map, drag on a card scrolls the list */
#vlist{background:none!important;box-shadow:none!important;pointer-events:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#vlist::after{display:none!important}
#vlist .vl-hd,#vlist .vc,#vlistX{pointer-events:auto}
#vlist #vcards{padding-left:0!important;padding-right:0!important}
#vlist .vl-hd{margin:0 0 16px!important;padding:16px 48px 16px 16px!important;border:0!important;border-radius:var(--r);box-shadow:inset 0 0 0 2px var(--vc,#1E1E1E)}
#vlistX{top:16px!important;right:8px!important}
#vlist .vc{box-shadow:0 2px 12px rgba(17,17,17,.16)}
body.listopen .leaflet-marker-pane,body.listopen .leaflet-shadow-pane{opacity:0;pointer-events:none;transition:opacity .3s ease}
.leaflet-marker-pane{transition:opacity .3s ease}
/* Oct 21: the roteiro's name is fixed: centred, 24px under the map/list button, about 10% smaller; no dragging */
.logo,.logo.free,body.viewer .logo,body.preview .logo{top:calc(env(safe-area-inset-top) + 76px)!important;   /* Oct 24: 20px nearer the top buttons */bottom:auto!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;padding:0 48px!important;justify-content:center!important;align-items:center!important}
.logo .tap{justify-content:center}
.logo span{font-size:28px!important;line-height:32px!important;text-align:center!important}   /* Oct 24: the roteiro's title smaller (was 40px) */   /* Oct 22: a little more room between lines (was 32px) */
.logo.by,.logo.by.al-l,.logo.by.al-r{align-items:center!important}
.lg-by{text-align:center}
.logo .tap{touch-action:auto;cursor:pointer}
/* the list keeps the map's title: its own head and X go */
#vlist .vl-hd,#vlistX{display:none!important}
#vlist #vcards{padding-top:0!important}
/* the list takes the whole screen under the title and scrolls anywhere (the map is locked) */
#vlist,#vlist #vcards{pointer-events:auto!important}
#vlist{top:auto!important;left:12px;right:12px;margin:0 auto}
#vlist #vcards{padding-top:24px!important;padding-bottom:calc(128px + env(safe-area-inset-bottom))!important}
#vlist .vc{will-change:transform,opacity;transition:transform .15s linear,opacity .15s linear,filter .15s linear!important}
#vlist .vc.drag{transition:none!important}
/* Oct 21: in reading mode the photos have no title: they sit flush under the separator above */
.field.fph{padding-top:8px!important}
.field.fph>div{margin-top:0!important}
.field.fph + .field{margin-top:0!important}
.field.fph .pmos{margin-top:0!important}   /* Oct 22: and the line above: the photos start right under it (the pin page had 24px there) */   /* Oct 22: the photos meet the separators: the line above where they start, the next line where they end (no gap) */
/* Oct 21: the form's head matches the pin page's: translucent glass, a 2px separator in the panel colour, no waves; the name sits where the page's name sits */
#form .hd{padding:8px 48px 8px 16px!important;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:2px solid var(--fcol,#1E1E1E)}
#form .hd::after{display:none!important}
#form .hd + .field{margin-top:16px!important;padding-top:0!important}
#form .hd + .field::before{display:none!important}
/* Oct 21: a deleted pin: it pulls out of the ground, rises spinning three turns and shrinks away; its scribble and shadow fade; bits of its colour fall on the map */
.mpin.bye .pbody{animation:bye 1.6s cubic-bezier(.42,0,.72,1) both,byeS 1.6s linear both,byeO 1.6s linear both;will-change:transform,scale,opacity}   /* Oct 21 (smoother): one unbroken motion: it lifts and spins three turns, gathering speed, never pausing */
@keyframes bye{0%{transform:perspective(320px) translateY(0) rotateY(0)}100%{transform:perspective(320px) translateY(-40px) rotateY(1080deg)}}
@keyframes byeS{0%,62%{scale:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}100%{scale:0}}   /* it shrinks only in the last part, still spinning (its own property, so the spin runs on undisturbed) */
@keyframes byeO{0%,52%{opacity:1}100%{opacity:0}}   /* full strength through the first whole turn, then it fades */
.mpin.bye .pmk>svg:first-child,.mpin.bye .pscr{transition:opacity .5s ease .9s;opacity:0}
.byefx{position:relative;width:64px;height:100%;pointer-events:none}
.byefx i{position:absolute;left:0;top:0;border-radius:50%;background:var(--c)}
#pvClose,.pv-n,.pv-dots{-webkit-transform:translateZ(0);transform:translateZ(0)}   /* Oct 21: composited above the scrolling track (iOS hit-testing) */
#vlist,#vlist.open{transform:none!important;transition:visibility 0s!important}   /* Oct 21: the cards themselves slide up and down, not the list */
#vlist.open{transition:visibility 0s!important}
/* Oct 21: consuming: the category filter. One glass surface, no outline, black text, its count as 1/4 (a fixed width that fits two digits each side); top right (the Preview close moves left); its caret unfolds a column of the same glass,
   as wide as the pill and as tall as what it holds: the map's markers, by count, each with its name under it and its count on it; tap to switch on or off */
#pvClose2{right:auto!important;left:16px!important}
.vf{display:none;position:fixed;z-index:852;top:calc(env(safe-area-inset-top) + 24px);right:16px;border-radius:26px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:none;
  clip-path:inset(0 0 calc(100% - 52px) 0 round 26px);transition:clip-path .45s cubic-bezier(.45,0,.25,1);pointer-events:none}
body.preview .vf,body.viewer .vf{display:block}
body.detopen .vf,body.dir .vf,body.adding .vf,body.sideopen .vf,body.intro .vf{opacity:0;visibility:hidden}
.vf.open{z-index:853;clip-path:inset(0 0 0 0 round 26px);pointer-events:auto}
#vfBtn{display:flex;flex:none;width:112px;height:52px;gap:8px;padding:0 16px;background:transparent!important;color:#1E1E1E!important;border-radius:26px;box-shadow:none!important;font-variant-numeric:tabular-nums;pointer-events:auto;white-space:nowrap}
.vf-car{transition:transform .45s cubic-bezier(.45,0,.25,1)}
.vf.open .vf-car{transform:rotate(180deg)}
.vf-dd{width:0;min-width:100%}
#vfCats{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 8px 24px}
/* Oct 21: every category switched off: free route. One line in the middle of the map, the get-app glass and words ("Com dicas é que estavas no bom caminho.") */
.vfree{position:fixed;z-index:851;left:50%;top:50%;width:max-content;max-width:calc(100% - 80px);transform:translate(-50%,-50%);padding:8px 16px;border-radius:999px;
  background:#FFFFFF;border:4px solid #1E1E1E;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;   /* Oct 21: the same word as the Pin criado tag: white, a 4px line (Música's pink) */
  text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.vfree.on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
body:not(.preview):not(.viewer) .vfree,body.detopen .vfree,body.dir .vfree,body.adding .vfree,body.sideopen .vfree,body.intro .vfree{opacity:0;visibility:hidden}
.vfi{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0;border:0;background:transparent;color:#1E1E1E;font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
.vfi .pmk-s{transition:opacity .3s ease,filter .3s ease}
.vfi:not(.on) .pmk-s{opacity:.35;filter:grayscale(1)}
.vfi .nm{font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E;text-align:center}
.vfi:not(.on) .nm{color:#767676}
.vfi .cnt{position:absolute;top:-6px;right:-10px;z-index:2;min-width:20px;height:20px;padding:0 8px;border-radius:10px;background:#1E1E1E;color:#FFFFFF;font:600 14px/16px Figtree,system-ui,sans-serif;text-align:center}
.vc.vhide{display:none!important}
/* Oct 21: every 10s, until the toggle is first tapped, the map icon plays its tap animation to the list and back: a hint that it can be tapped. In the list it simply stands turned 90° (no list icon) */
#viewTog .vtf,#viewTog .vtp{transform-box:view-box}
#viewTog .vtf{transform-origin:12px 12px}
#viewTog .vtl{transform-origin:9px 12px}
#viewTog .vtr{transform-origin:15px 12px}
#viewTog .vt-l{display:none!important}
#viewTog .vt-m,body.listopen #viewTog .vt-m{display:block!important;opacity:1!important;transform:none!important;scale:1!important;transition:none!important}
body.listgo #viewTog .vtf{transform:rotate(90deg)}   /* Oct 21: in the list the map icon stands turned 90° */
#viewTog.press:active,#viewTog.down,#viewTog:active{transform:none!important;scale:1!important}
#viewTog.press:active,#viewTog.down,#viewTog:active{transform:none!important;scale:1!important}   /* Oct 21: tapped: it folds, turns while folded, unfolds */
.ddesc.dsub{margin-top:16px!important}
/* Oct 21: under the photo, the app's language: a small mid-grey tag (8px corners), white letters; it opens the same dialog as the name */
.ava-c{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.lang-tag{display:block;min-width:32px;height:24px;padding:0 8px;border:0;border-radius:8px;background:var(--sc,#767676);color:var(--scfg,#FFFFFF);transition:background-color .3s ease,color .3s ease;font:600 14px/16px Figtree,system-ui,sans-serif;text-align:center;cursor:pointer}
#sideWhere{cursor:pointer}
.ask #askLang{margin-top:16px}
.ask p.ask-lt{margin:0;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.ask #askLang .group{margin-top:16px}
.ask #askLang .row:last-child{border-bottom:0}
/* Oct 22 (later): closed beta: a red diagonal strip across the bottom right corner, from the right edge at three quarters of the height
   down to the bottom edge just right of the middle; white words along it (Closed beta. Não distribuir. / Diz-nos o que pensas.); tapping it writes to us.
   Red everywhere, on every screen */
/* Oct 21: the get-the-app card is hidden for now and KEPT (Nuno: never delete it without reminding him twice); the closed beta stamp takes its place */
.getapp,body.viewer .getapp,body.preview .getapp{display:none!important}
/* Oct 21: in a browser tab (a shared link, or the app before it is installed) everything lives inside what the browser shows:
   the page is the small viewport (browser bars shown) minus what a floating bottom bar covers (iOS Safari), and every fixed
   element is placed inside it (the transform makes the page their frame). Installed on the home screen, the app still fills the screen */
:root{--appvh:100vh}
@supports (height:100svh){ @media (display-mode: browser){
  html:not(.inapp){--appvh:calc(100svh - env(safe-area-inset-bottom))}
  html:not(.inapp),html:not(.inapp) body{height:var(--appvh)}
  html:not(.inapp) body{position:relative;contain:layout;overflow:hidden}   /* Oct 22: contain (not a transform): a transformed page broke iOS taps on the photo viewer's X */
} }
/* the category filter never runs past the bottom: its column scrolls inside the room it has */
.vf{display:none;flex-direction:column;max-height:calc(100% - env(safe-area-inset-top) - 48px)}
body.preview .vf,body.viewer .vf{display:flex}
.vf #vfBtn{flex:none}
.vf-dd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Oct 22: the splash: the cursor and the line under it sit together in the middle of the screen; as the splash comes apart, the cursor glides
   down to its own place (the line fades with the splash) */
body.intro .bigpin{top:calc(50% - 42px)}   /* Oct 23 (later): the middle group (cursor, words, arrows) 80px higher than it was */
.tut-s{translate:0 -80px}
#intro .ln{top:calc(50% + 46px)}
/* Oct 22: the tagline sits right under the name, in plain text on the banner's glass (like the line under a roteiro's name) */
#intro .intro-tg{position:absolute;left:50%;transform:translateX(-50%);top:0;margin:0;max-width:calc(100% - 64px);text-align:center;font-family:Figtree,system-ui,sans-serif;font-weight:400;font-size:18px;line-height:32px;color:#1E1E1E;white-space:nowrap}
#intro .ln:empty{display:none}
body.introleave .bigpin{transition:opacity .3s ease,top .8s cubic-bezier(.45,0,.25,1)}
/* Oct 22: list to map: the markers show as soon as the list starts to leave, and come up out of the ground (the ground line clips them) */
body.listopen:not(.listgo) .leaflet-marker-pane,body.listopen:not(.listgo) .leaflet-shadow-pane{opacity:1;pointer-events:auto;transition:none}
body.listgo .leaflet-marker-pane,body.listgo .leaflet-shadow-pane{opacity:0;pointer-events:none}   /* hidden until the icon starts to unfold */
body.sprout .mpin .pbody{animation:sprout .54s cubic-bezier(.2,.9,.3,1) var(--sd, 0ms) both}
@keyframes sprout{0%{transform:translateY(110%)}68%{transform:translateY(-7%)}84%{transform:translateY(2%)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){body.sprout .mpin .pbody{animation:none}}
/* Oct 22: dragging a category in the filter: the held one lifts and follows the finger, the others make room */
.vfi{touch-action:pan-y;transition:transform .2s cubic-bezier(.45,0,.25,1)}
.vfi.drag{z-index:3;transition:none;scale:1.08}
#vfCats.dragging .vfi:not(.drag){transition:transform .2s cubic-bezier(.45,0,.25,1)}
/* Oct 22: the category filter casts the app's shadow. Its unfolding is a clip, which would cut a box-shadow, so the shadow is drawn by a
   full-screen layer around it (a drop-shadow that follows the clipped shape as it grows and folds) */
.vf-sh{position:fixed;inset:0;z-index:853;pointer-events:none;filter:drop-shadow(0 0 7px rgba(17,17,17,.16))}
.vf-sh .vf{position:absolute}
/* Oct 22: photos never leave their container: a panel's scrolling body is cut to the panel's own rounded corners (iOS does not clip a
   scrolling layer by its parent's radius), and the full-screen photos are cut to the viewer's rounded frame */
.form .form-body{-webkit-clip-path:inset(0 round var(--r) var(--r) var(--r-foot) var(--r-foot));clip-path:inset(0 round var(--r) var(--r) var(--r-foot) var(--r-foot))}
#pv .pv-track{-webkit-clip-path:inset(0 round 55px);clip-path:inset(0 round 55px)}
/* Oct 22: banner (ribbon) shape: a rectangle with an equilateral triangle cut into each end, its tip at mid-height
   (Oct 22, later: half as deep, height x 0.433, set as --nd from the real height; the white banner sits 4px inside: corners 8.8px in, tips 5.3px in). The outlined ones (Pin criado, Pin apagado, Guardado, the free-route line) paint
   the outline as the background and lay the white banner 4px inside it (corners 3.73 x 4px in, tips 2 x 4px in, so the line stays 4px all round) */
.rib{--nd:16.5px;-webkit-clip-path:var(--ribOut,polygon(0 0,100% 0,calc(100% - var(--nd)) 50%,100% 100%,0 100%,var(--nd) 50%));clip-path:var(--ribOut,polygon(0 0,100% 0,calc(100% - var(--nd)) 50%,100% 100%,0 100%,var(--nd) 50%))}
.rib.ol{isolation:isolate;border:0!important;border-radius:0!important;padding:8px calc(16px + var(--nd))!important;background:var(--c,#1E1E1E)!important}
/* two lines: room on both sides for the pieces' cuts and their step out */
.rib.ml{padding-left:calc(20px + var(--nd))!important;padding-right:calc(20px + var(--nd))!important}
.rib{text-align:center}
.rib.ol.ml{padding-left:calc(24px + var(--nd))!important;padding-right:calc(24px + var(--nd))!important}
.rib.ol::before{content:'';position:absolute;inset:0;z-index:-1;background:#FFFFFF;
  -webkit-clip-path:var(--ribIn,polygon(8.8px 4px,calc(100% - 8.8px) 4px,calc(100% - var(--nd) - 5.3px) 50%,calc(100% - 8.8px) calc(100% - 4px),8.8px calc(100% - 4px),calc(var(--nd) + 5.3px) 50%));
  clip-path:var(--ribIn,polygon(8.8px 4px,calc(100% - 8.8px) 4px,calc(100% - var(--nd) - 5.3px) 50%,calc(100% - 8.8px) calc(100% - 4px),8.8px calc(100% - 4px),calc(var(--nd) + 5.3px) 50%))}
/* Oct 22: messages are banners too, in the middle of the screen, outlined in a category colour picked at random each time */
.toast.rib{left:50%;right:auto;top:50%;bottom:auto;width:max-content;max-width:calc(100% - 48px);margin:0;transform:translate(-50%,calc(-50% + 8px));
  color:#1E1E1E;font-weight:600;font-size:18px;line-height:32px;text-align:center}
.toast.rib.show{transform:translate(-50%,-50%)}
/* Oct 22: the line under the name (Já adicionaste N pins, or who sent it and how many) sits on a pill of the app's glass, so it reads over the map */
.lg-by{width:fit-content;max-width:100%;margin-left:auto!important;margin-right:auto!important;padding:4px calc(12px + var(--nd));border-radius:0;box-sizing:border-box;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
/* Oct 22: the search cursor is glass, not white: the bubble and the tail show the map blurred through the app's glass. The outline is drawn
   over it, open where the tail leaves (a hole cut at the bubble's foot, centred, so it holds when the bubble stretches into the search field);
   the tail's glass starts where the bubble ends, so the two never overlap */
.bp-b{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:none}
.bp-b::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 6px #1E1E1E;pointer-events:none;
  -webkit-mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat;-webkit-mask-composite:xor;
  mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat;mask-composite:exclude}
.bp-t{z-index:2}   /* Oct 23: the tail lies over the bubble's foot by 1px, so no light seam shows where the two lines meet */
/* Oct 23: the opening in the bubble's outline is cut along the tail's inner edges (22.24px at the top, 16.56px at the foot), so the bubble's line runs on into the tail's with no step */
.bp-j{display:none}
.bp-t polygon{fill:none}
body.intro .bp-t,body.intro .bp-b{-webkit-backdrop-filter:none;backdrop-filter:none}
body.intro .bp-t{background:none}
.bp-t{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-clip-path:path('M14.84 36.5 H45.16 L34.39 63 Q30 73.8 25.61 63 Z');clip-path:path('M14.84 36.5 H45.16 L34.39 63 Q30 73.8 25.61 63 Z')}   /* Oct 22: the tip rounded, like the banners' corners */   /* Oct 23: a softer curve at the tip; the tail is the bubble's glass (no white), so the cursor reads as one shape */
/* Oct 22: the top row's round buttons (map/list in the middle, the menu on the right): a 56px circle of the app's glass with the filter
   panel's shadow; both icons the same size (36px), centred where they were */
#viewTog,#menuBtn{width:56px!important;height:56px!important;border-radius:50%!important;top:calc(env(safe-area-inset-top) + 22px)!important;
  background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:none!important}   /* Oct 22: no shadow */
#viewTog{margin-left:-32px!important}
/* Oct 22: top left, the same glass button with an eye: the active roteiro as your friends will see it (its preview) */
#pvTop{position:fixed;z-index:845;left:22px;top:calc(env(safe-area-inset-top) + 22px);width:56px;height:56px;padding:0;border:0;border-radius:50%;color:#1E1E1E;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
#pvTop svg{width:36px;height:36px}
/* Oct 22: in a preview and in a shared link, bottom right, the same glass button with Partilhar: shares it straight from the map (friends can pass it on) */
#pvShare{position:fixed;z-index:850;right:22px;bottom:22px;   /* Oct 22: the same distance from the right and the bottom: centred on the screen's corner (the home bar is in the middle, away from it) */
  width:56px;height:56px;padding:0;border:0;border-radius:50%;color:#1E1E1E;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
#pvShare svg{width:32px;height:32px;overflow:visible}
/* Oct 22: the share button says hello: it grows a little and its arrow pops up and back (on entering a preview, and on each tap) */
#pvShare.nudge{animation:shGrow .6s cubic-bezier(.3,0,.3,1)}
#pvShare.nudge .sh-ar{animation:shUp .42s cubic-bezier(.3,0,.3,1) .08s}
@keyframes shGrow{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}
@keyframes shUp{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
body.preview #pvShare,body.viewer #pvShare{display:flex}
body.intro #pvShare,body.detopen #pvShare,body.dir #pvShare,body.sideopen #pvShare{opacity:0;pointer-events:none}
body.listopen #pvShare{z-index:875}
/* Oct 23: preview and shared link: a round glass button at the bottom, in the middle, with the classic location marker (black, a white person): it centres the map on you */
#meBtn{position:fixed;z-index:850;left:var(--mex,50%);margin-left:-32px;bottom:calc(22px + var(--sbh));width:56px;height:56px;padding:0;border:0;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
#meBtn svg{display:block}
body.preview #meBtn,body.viewer #meBtn{display:flex}
body.intro #meBtn,body.detopen #meBtn,body.dir #meBtn,body.sideopen #meBtn,body.listopen #meBtn{opacity:0;pointer-events:none}   /* Oct 22: on the list too, above the cards */
body.intro #pvTop,body.searching #pvTop,body.detopen #pvTop,body.adding #pvTop,body.preview #pvTop,body.viewer #pvTop,body.lantern #pvTop,body.dir #pvTop,body.sideopen #pvTop,body.listopen #pvTop{opacity:0;pointer-events:none}
#menuBtn{right:22px!important}
#viewTog svg{width:36px!important;height:36px!important;margin:-16px 0 0 -16px!important}
#menuBtn svg{width:36px;height:36px}
/* Oct 22: the cursor's glass, the same as the round buttons' (72% white, blur 14px), in every state: resting, dragged, searching, buried, planted.
   Nothing around it may cut it (a clip on a parent would stop the blur), so the buried tail is cut on the tail itself */
.bigpin{-webkit-clip-path:none!important;clip-path:none!important}
.bigpin.buried .bp-t{-webkit-clip-path:polygon(15.24px 37.5px,44.76px 37.5px,32.15px 68.5px,27.85px 68.5px);clip-path:polygon(15.24px 37.5px,44.76px 37.5px,32.15px 68.5px,27.85px 68.5px)}
.pglass{position:absolute;left:0;top:0;width:104px;height:129px;pointer-events:none;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.plant > svg{position:relative}
/* Oct 22: radio buttons come before their label and are dark grey (not blue), everywhere; text fields' underlines are the light grey
   of the list dividers, not black */
.row input[type=radio]{order:-1;accent-color:var(--ink)}
.ask .plain-in,.rot-new .plain-in{border-bottom:2px solid var(--line)}
/* Oct 22: map types in the name dialog: circles with a thumbnail, the chosen one ringed in the panel's colour (6px, as every selection) */
.ask #askLook{margin-top:48px}
#askLinks{display:flex;flex-direction:column;gap:16px;margin-top:16px}
#askLinks[hidden]{display:none}
#askLinks .btn{flex:none;width:100%;text-decoration:none}
.lk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:16px}
.lk{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:transparent;font:inherit;color:#1E1E1E;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lk-c{position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#F2F2F2}
.lk-c img{display:block;width:100%;height:100%;object-fit:cover}
.lk-c::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(17,17,17,.16);pointer-events:none}
.lk.on .lk-c::after{box-shadow:inset 0 0 0 6px var(--lkc,#1E1E1E)}
.lk-n{font-size:14px;line-height:16px;text-align:center;color:#1E1E1E}
.lk.on .lk-n{color:#1E1E1E}
.ask{max-height:calc(var(--appvh) - env(safe-area-inset-top) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}   /* a tall dialog scrolls */
/* Oct 22 (saving height): the language in one row, its name on the left and the two choices on the right, the chosen one ringed in the
   panel's colour like the map types; fields 8px from text to underline; map types closer together */
.ask #askLang{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.ask #askLang[hidden]{display:none}
.lg-seg{display:flex;gap:8px}
.lgo{height:44px;padding:0 16px;border:0;border-radius:22px;background:transparent;font:inherit;font-size:18px;line-height:32px;color:#1E1E1E;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lgo.on{color:#1E1E1E;box-shadow:inset 0 0 0 6px var(--lkc,#1E1E1E)}
.ask .plain-in{padding:8px 0 8px!important}
.ask #askLook{margin-top:48px}
.lk-grid{gap:8px 8px!important;margin-top:16px}
.lk{gap:4px!important}
/* Oct 22: the menu's tabs: the active one in the panel's colour with a line under it as thick as the panel's outline (6px); the other grey */
.side-tabs{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.stab{position:relative;padding:0 0 16px;border:0;background:transparent;font:inherit;font-size:18px;line-height:32px;font-weight:600;color:#767676;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.stab.on{color:#1E1E1E}   /* Oct 25: the chosen tab's words black (the coloured ones fell under 4.5:1); its line keeps the colour */
.stab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:3px;background:var(--sc,#1E1E1E)}
.stab-n{font-weight:600}
.side-pref{--lkc:var(--sc,#1E1E1E);display:flex;flex-direction:column;flex:1;margin-top:16px}
.pf-lang{display:flex;justify-content:center}
.pf-lang .lg-seg{width:100%}
.pf-lang .lgo{flex:1}
.side-pref .ask-lt{margin:0;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.side-pref .pf-h{margin-top:48px}
.side-pref .lk-grid{grid-template-columns:repeat(3,1fr)}
#sideAcc .bk{margin-top:48px;gap:8px}
#sideAcc{display:flex;flex-direction:column;flex:1 0 auto;padding-bottom:0!important}
#sideAcc .ac-foot{margin-top:auto;padding-top:48px;display:flex;flex-direction:column}
#sideAcc .ac-mail{margin-top:-8px!important;font-size:18px;line-height:32px;color:#1E1E1E;text-align:center}
#sideAcc #bkBox .sect-t{text-align:center}   /* Oct 23: who is signed in, centred over Sair */
#sideAcc .ac-legal{position:relative;margin:0!important;padding:0 0 24px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:14px;line-height:16px;color:#767676}
#sideAcc .ac-legal::before{display:none;content:'';position:absolute;top:0;left:-16px;right:-16px;height:2px;background:var(--sc,#1E1E1E);pointer-events:none;transition:background .3s ease}
#sideAcc .ac-legal a{color:#1E1E1E;font-weight:600}
#sideAcc .ac-note{margin-top:16px!important;font-size:14px;line-height:16px;color:#767676}
#sideAcc .bk .btn.remove{background:var(--red-tint)!important;color:var(--red)!important}
#sideAcc .ac-mail{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}   /* Oct 23: one line; a longer email ends in … and a tap shows it whole */
#sideAcc .bk{position:relative}
.mail-tip{position:absolute;left:-8px;right:-8px;z-index:5;padding:8px 16px;border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);font-size:18px;line-height:32px;color:#1E1E1E;text-align:center;overflow-wrap:anywhere;text-wrap:balance;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.mail-tip.on{opacity:1;transform:none}
#sideAcc .sect-t{font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
#sideAcc .bk .btn{flex:0 0 52px;margin-top:16px;width:100%;height:52px;min-height:52px;padding:0 24px;border-radius:26px;font-size:18px;line-height:32px;font-weight:600;letter-spacing:0;background:#F2F2F2;color:#1E1E1E}   /* Oct 22: the account's buttons are secondary, so Aplicar stays the panel's one black button */
/* Oct 22: Preferências split by full-width lines, like the one under the tabs: under the languages, between the map types and the account,
   and above the buttons at the foot (each 32px from what sits around it) */
.side-pref .pf-h{position:relative;margin-top:48px!important;padding-top:48px}
#sideAcc{padding-bottom:48px}
#sideAcc .bk{position:relative;margin-top:48px;padding-top:48px}
.side-pref .pf-h::before,#sideAcc .bk::before,.side-pref .pf-foot::before{content:'';position:absolute;top:0;left:-16px;right:-16px;height:2px;background:var(--sc,#1E1E1E);pointer-events:none;transition:background .3s ease}
.side-pref .pf-foot{position:relative}
/* Oct 22: Cancelar and Aplicar stay put at the panel's foot while the rest scrolls, on the app's white glass, edge to edge */
/* Oct 22: Exportar and Importar dicas, fixed at the foot of the Roteiros tab, on white glass, a line above, edge to edge (as Cancelar/Aplicar) */
#sideRotFoot{position:sticky;bottom:-16px;z-index:3;margin:auto -16px -16px;padding:24px 16px 16px;display:flex;gap:16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
#sideRotFoot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc,#1E1E1E);pointer-events:none}
#sideRotFoot .btn{flex:1;height:52px;background:#F2F2F2;color:#1E1E1E}
.side-pref .pf-foot{position:sticky;bottom:-16px;z-index:3;margin:auto -16px -16px;padding:24px 16px 16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.side-pref .pf-foot::before{left:0!important;right:0!important}
/* Oct 22: the language choices are tiles like the categories: 8px corners, the panel's category texture (grey when not chosen,
   in its colour when chosen), the word on a white label; the outline drawn on top */
/* Oct 23: the menu: a column of entry points on the right (the X on top, in the menu button's place; then Tu, Roteiros, Preferências),
   the same surface as the panel; the chosen one opens its panel to the left of the column, sliding out from under it */
.srail{position:fixed;z-index:882;top:calc(env(safe-area-inset-top) + 12px);right:12px;bottom:12px;width:76px;border:6px solid var(--sc,#1E1E1E);border-radius:var(--r) var(--r) 38px 38px;
  background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;transform:translateX(calc(100% + 24px));visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s .5s,border-color .3s ease}
.srail.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s,border-color .3s ease}
#sideRail #sideX{position:absolute!important;top:6px!important;right:6px!important;left:auto!important;width:44px;height:44px;border-radius:0;background:transparent!important;color:var(--sc,#1E1E1E)!important;box-shadow:none}
#sideRail #sideX svg{width:28px;height:28px}
.sr-ic{position:absolute;right:0;width:64px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px}
.sri{flex:none;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:transparent;color:#1E1E1E;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .3s ease;-webkit-tap-highlight-color:transparent;cursor:pointer}
.sri.on{box-shadow:inset 0 0 0 6px var(--sc,#1E1E1E)}   /* the chosen entry: the 6px ring of every chosen thing */
.side{right:88px!important;width:min(336px, calc(100vw - 100px))!important;z-index:880;transform:translateX(calc(100% + 112px));border-right:0!important;border-radius:var(--r) 0 0 var(--r-foot)!important}
/* Oct 23: the open panel joins the column: square corners where they meet, and between them a line as thin as the horizontal ones (2px) */
.srail{transition:transform .5s var(--ease),visibility 0s .5s,border-color .3s ease,border-left-width .3s var(--ease),border-radius .3s var(--ease)}
.srail.open{transition:transform .5s var(--ease),visibility 0s,border-color .3s ease,border-left-width .3s var(--ease),border-radius .3s var(--ease)}
.srail.joined{border-left-width:2px;border-top-left-radius:0;border-bottom-left-radius:0}
.side.open{transform:none}
.side .sec{display:none;flex-direction:column;flex:1 0 auto}
.side[data-s=user] #secUser,.side[data-s=rot] #secRot,.side[data-s=stats] #secStats,.side[data-s=pref] #secPref,.side[data-s=legal] #secLegal{display:flex}
/* Oct 23: Legal, the column's fourth entry: two tabs (Termos de uso, Privacidade), the text below, scrolling with the panel */
.lg-tabs{justify-content:flex-start;align-items:flex-end;gap:16px;font-size:18px}
.lg-tabs .stab{font-size:18px;line-height:32px}
.lg-body{position:static;overflow:visible;padding:24px 0 48px}
.lg-body h1{display:none}   /* the tab already names it */
.lg-tabs{padding-bottom:16px!important}
.side .sec{animation:secIn .3s ease}
@keyframes secIn{from{opacity:0}to{opacity:1}}
.sec-hd{position:relative;margin:0;min-height:44px;padding-bottom:24px;display:flex;align-items:center;gap:8px;font-size:28px;line-height:32px;font-weight:600;color:#1E1E1E;box-sizing:content-box}
.sec-hd::after{content:'';position:absolute;bottom:0;left:-16px;right:-16px;height:2px;background:var(--sc,#1E1E1E);pointer-events:none;transition:background .3s ease}
.sec-hd .stab-n{font-weight:600}
#secRot .side-list{margin-top:16px!important}
.side-pref{margin-top:0!important}
.side-pref .pf-lang{margin-top:16px}
.side-top .who-c{padding-right:0!important}
#sideLang{display:none!important}   /* the language lives in Preferências */
#secUser #sideAcc .bk{margin-top:16px;padding-top:24px}
/* Oct 23: the language choices are plain white tiles, like the map types: a faint line, the chosen one with the 6px outline; no texture */
#sidePref .lgo{position:relative;border-radius:8px;background:#FFFFFF;color:#1E1E1E;box-shadow:inset 0 0 0 1px rgba(17,17,17,.16);display:flex;align-items:center;justify-content:center;transition:box-shadow .3s ease}
#sidePref .lgo.on{box-shadow:inset 0 0 0 6px var(--lkc,#1E1E1E)}
/* Oct 23: Termos and Privacidade open inside the panel, covering it (the column stays); an X top left closes them; the text scrolls */
.side.docopen{overflow:hidden}
.sdoc{position:absolute;inset:0;z-index:20;background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;border-radius:inherit;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.sdoc.open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
#sideDocX{position:absolute!important;top:10px!important;left:8px!important;right:auto!important;z-index:2;width:44px;height:44px;border-radius:0;background:transparent!important;color:var(--sc,#1E1E1E)!important;box-shadow:none}
#sideDocX svg{width:28px;height:28px}
.sd-body{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:48px 16px 48px;color:#1E1E1E;font-size:18px;line-height:32px}
.sd-body h1{margin:0 0 8px;font-size:28px;line-height:32px;font-weight:600;color:#1E1E1E}
.sd-body h2{margin:48px 0 8px;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.sd-body p,.sd-body li{margin:0 0 8px}
.sd-body ul{margin:0 0 8px;padding-left:24px}
.sd-body .meta{color:#767676;margin-bottom:16px}
.sd-body a{color:#1E1E1E;font-weight:600;overflow-wrap:anywhere}
/* Oct 23: your photo bigger (56px) with the panel's outline: its colour, 6px */
#side .side-top .ava{width:56px;height:56px;font-size:18px;box-shadow:0 0 0 6px var(--sc,#1E1E1E);transition:box-shadow .3s ease}
/* Oct 23: tall panels are held by their edges (12px from the top of the visible screen and from the bottom), never by a height worked out from vh:
   in the installed app 100vh can include the status bar, which pushed the pin page's top off the screen */
#det,#form.page{top:calc(env(safe-area-inset-top) + 12px)!important;bottom:12px!important;height:auto!important;max-height:none!important}
.ask{max-height:calc(100% - env(safe-area-inset-top) - 24px)!important}
/* Oct 23: Legal's tabs: a glass bar fixed at the top of the panel, the two tabs centred, one underline that slides to the chosen tab with a small bump */
#secLegal .lg-tabs{position:sticky;top:-10px;z-index:3;margin:-8px -16px 0;padding:8px 16px 16px;justify-content:center;gap:16px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
#secLegal .lg-tabs::after{left:0;right:0}
#secLegal .lg-tabs .stab.on::after{display:none}
#secLegal .lg-tabs .stab{transition:color .25s ease}
.lg-ind{position:absolute;bottom:16px;left:0;width:0;height:6px;border-radius:3px;background:var(--sc,#1E1E1E);pointer-events:none;transition:left .4s cubic-bezier(.34,1.45,.64,1),width .4s cubic-bezier(.34,1.45,.64,1)}
.lg-ind.now{transition:none}
#secLegal .lg-body{position:static;inset:auto;overflow:visible;padding:24px 0 48px}
/* Oct 23: Tu's head: the photo and its two lines centred on each other, and the group centred in the panel; the greeting 8px nearer the name */
#secUser .side-top{justify-content:center;align-items:center!important;gap:16px;padding-top:16px}   /* 24px above (with the panel's 10px) as below */
#secUser .side-top .ava-c{align-self:center}
#secUser .side-top .who-c{align-self:center!important;padding-top:0!important;flex:0 1 auto;min-width:0}
#secUser .side-top .who-c .side-city{margin-top:8px!important}
/* Oct 23: the chosen entry is a tab: round on the right around its icon, two straight lines running left to the column's line,
   and that line opened between them, so the entry flows into its panel (no ring) */
.sri{position:relative;z-index:0}
.sri.on{box-shadow:none!important}
.sri::before{content:'';position:absolute;z-index:-1;left:-10px;top:-2px;width:68px;height:60px;box-sizing:border-box;border:2px solid var(--sc,#1E1E1E);border-left:0;border-radius:0 30px 30px 0;
  background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;transform:scaleX(0);transform-origin:0 50%;transition:transform .24s cubic-bezier(.45,0,.55,1),border-color .3s ease;pointer-events:none}
/* Oct 23: changing entry: the old tab flattens into the column's line, then the new one grows out of the line */
.srail.joined .sri.on::before{transform:scaleX(1);transition:transform .3s cubic-bezier(.45,0,.55,1) .22s,border-color .3s ease}
#side{background:#FFFFFF;background-image:var(--pbg,radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px));background-size:var(--pbs,12px 12px)}
#sideRail .sri::before{background:#FFFFFF;background-image:var(--pbg,radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px));background-size:var(--pbs,12px 12px)}
.sdoc{background:#FFFFFF;background-image:var(--pbg,radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px));background-size:var(--pbs,12px 12px)}
/* Oct 23: the legal text reads like a pin's description: 20px, black */
.sd-body{font-size:18px!important;line-height:32px!important;color:#1E1E1E!important}
.sd-body h2{font-size:18px!important;line-height:32px!important}
.sd-body .meta{font-size:18px;line-height:32px;color:#1E1E1E!important}
/* Oct 23 (later): one tab that moves: it slides to the chosen entry and lands with a small bump (the per-entry tabs go) */
#sideRail .sri::before{display:none!important}
.sri{z-index:1}
.sr-tab{position:absolute;z-index:0;left:-6px;top:0;width:68px;height:60px;box-sizing:border-box;border:2px solid var(--sc,#1E1E1E);border-left:0;border-radius:0 30px 30px 0;pointer-events:none;
  background:#FFFFFF;background-image:var(--pbg,radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px));background-size:var(--pbs,12px 12px);
  transform:scaleX(0);transform-origin:0 50%;transition:top .45s cubic-bezier(.34,1.4,.64,1),transform .3s cubic-bezier(.45,0,.55,1),border-color .3s ease}
.sr-tab.now{transition:transform .3s cubic-bezier(.45,0,.55,1),border-color .3s ease}
.srail.joined .sr-tab.show{transform:scaleX(1)}
/* Oct 23: in the list view the map is only a backdrop: a soft blur over it (fades in and out with the list) */
#map::after{content:'';position:absolute;inset:0;z-index:990;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
body.listopen #map::after{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
/* Oct 23: Conta tudo ~30% taller to write in (112 → 144px); where it is read (pin page, preview, shared link) the text takes what it needs, up to that same height, then scrolls */
/* Oct 23 (later): no scroll in descriptions: the box being written in grows with its text (from 144px), and on the pin's page the text shows whole (600 characters at most) */
#descIn{min-height:144px!important;height:144px;overflow-y:hidden;resize:none}
.ddesc{max-height:none;overflow:visible}
/* Oct 23: closed beta is a plain bar across the bottom of the screen: horizontal, the app's letter and small size (15/22), no shadow on the words;
   what sits at the bottom moves up above it */
:root{--sbh:calc(38px + env(safe-area-inset-bottom))}
#pvShare,#vKeep,#meBtn{bottom:calc(16px + var(--sbh))!important}   /* Oct 23: 16px above the closed beta bar */
.leaflet-bottom{bottom:var(--sbh)!important}
body.viewer .leaflet-bottom.leaflet-left{bottom:calc(86px + var(--sbh))!important}
/* Oct 23: the feedback panel, like the pin page: 12px from every edge, the category line (red), the dots; the text scrolls; Enviar on a glass foot */
@keyframes fbn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}   /* like Português / English */   /* Oct 23: a short hello before the questions */
/* Oct 23: the bar's words on two lines, a white speech bubble on their left that gives a little shake every 10 s, calling for a tap (it opens the survey) */   /* Oct 23: to the left, as far from the left edge as from the bottom of the screen; centred on the bar's height */
@keyframes stWig{0%,7%,100%{transform:none}1%{transform:rotate(-14deg)}2%{transform:rotate(12deg)}3%{transform:rotate(-10deg)}4%{transform:rotate(8deg)}5%{transform:rotate(-4deg)}6%{transform:rotate(2deg)}}
/* Oct 23: the bar: a white comic bubble (20% bigger) with a lightning bolt cut out in the middle (the bar shows through); a watermark of the same bolts,
   half the bubble's size, 4px apart, rows offset so they run on the diagonal, in a darker red; the words and bubble centred on the bar's full height; no underline */
/* Oct 23: the closed beta bar sits over everything on the map and the lists (panels and dialogs still come above it, or hide it); lists end above it */
#vlist .lib-list,#vlist #vcards{padding-bottom:calc(128px + var(--sbh))!important}
/* Oct 23: the bar's top edge: a wave (half circles 4px wide-radius, 10% flatter, up then down) on a line tilted 2.5° (rising to the right); drawn as a mask from the bar's size */
.me-mk{width:22px;height:29px;transform-origin:50% 100%}
.me-mk svg{display:block}
.me-mk.spin{animation:meSpin .8s cubic-bezier(.45,0,.55,1)}
.me-mk.flipx{animation:meFlipX .8s cubic-bezier(.45,0,.55,1);transform-origin:50% 60%}
@keyframes meFlipX{0%{transform:perspective(200px) translateY(0) rotateX(0)}25%{transform:perspective(200px) translateY(-16px) rotateX(90deg)}75%{transform:perspective(200px) translateY(-16px) rotateX(300deg)}100%{transform:perspective(200px) translateY(0) rotateX(360deg)}}
@keyframes meSpin{0%{transform:translateY(0) rotateY(0)}25%{transform:translateY(-16px) rotateY(180deg)}75%{transform:translateY(-16px) rotateY(540deg)}100%{transform:translateY(0) rotateY(720deg)}}
/* Oct 23: the bubble keeps its place on the left; the two lines are centred on the bar */
.addr-hint{display:block;margin-top:4px;color:var(--red,#D0281C);font-size:14px;line-height:16px;font-weight:600}   /* Oct 23: a pin placed by hand: a red, passing note beside Morada (gone once you write) */
.addr-hint[hidden]{display:none}
/* Oct 23: the splash how-to: turquoise, hand-written (Caveat), tilted, numbered dots; each step draws its arrow and fades in, then gives way to the next */
.tut{position:fixed;inset:0;z-index:598;pointer-events:none;display:none;--tq:#1E1E1E}   /* a lighter, vivid blue */
body.intro .tut{display:block}
body:not(.intro) .tut{display:none}
.tut-s{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.tut-s.on{opacity:1}
.tut-t{position:absolute;margin:0;font-family:Kalam,'Segoe Print','Bradley Hand',cursive;font-weight:400;font-size:18px;line-height:32px;color:var(--tq);transform:rotate(-7deg) scale(.92);transition:transform .6s cubic-bezier(.3,0,.3,1)}
.tut-s.on .tut-t{transform:rotate(-7deg) scale(1)}
.tut-t{text-wrap:balance}
.tut-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:var(--tq);color:#FFFFFF;font-size:18px;line-height:16px;vertical-align:2px}
.tut-a{position:absolute;fill:none;stroke:var(--tq);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tut-a path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.55,1) .25s}
.tut-a path.hd{transition-delay:.85s;transition-duration:.25s}
.tut-s.on .tut-a path{stroke-dashoffset:0}
/* 1: the words up and to the left, the arrow curving down onto the pin's bubble */
.t1 .tut-t{left:24px;right:24px;top:auto;bottom:calc(50% + 132px);white-space:normal}   /* anchored by its foot: one line or two, it ends just above the arrow */
.t1 .tut-a{left:calc(50% - 140px);top:calc(50% - 127px);width:90px;height:90px}
/* 2: an arrow down beside the pin, the words below it */
.t2 .tut-t{left:32px;right:32px;top:calc(50% + 76px);text-align:center;transform-origin:50% 50%}
.t2 .tut-a{left:calc(50% + 20px);top:calc(50% - 10px);width:70px;height:76px}
/* 3: the pin opens into the search field (drawn in turquoise), the words above, the arrow pointing back at it */
.t3 .tut-t{left:24px;right:24px;top:auto;bottom:calc(50% + 124px);text-align:center}
.t3 .tut-a{left:calc(50% - 10px);top:calc(50% - 120px);width:60px;height:40px}
/* Oct 23: the real (black) pin shows the two actions: 2, a finger presses and holds, and the pin is pushed down into the ground; 3, a tap, and it opens into the search */
.t4 .tut-t{left:24px;right:24px;top:auto;bottom:calc(50% + 124px);text-align:center}
.t5 .tut-t{left:24px;right:24px;top:auto;bottom:calc(50% + 124px);text-align:center}
.t5 .tut-a{left:calc(50% - 10px);top:calc(50% - 120px);width:60px;height:40px}
.tut.fadeall .tut-s,.tut.fadeall .tut-pl{opacity:0!important;transition:opacity .4s ease!important}
.t4 .tut-a{left:calc(50% - 10px);top:calc(50% - 120px);width:60px;height:40px}
.tut-pl{position:absolute;left:0;top:0;width:0;height:0}
.tut-pl .tut-big .msz{transform:scale(1.625)!important;transform-origin:50% 100%}   /* the new pin as big as the cursor, only here */
/* on the splash, the cursor opened into the search looks as in the app (white field, whole outline), not cut to the splash's small white */
body.intro .bigpin.open .bp-tx,body.intro .bigpin.open .bp-tx2{display:none!important}
body.intro .bigpin.open .bp-b{background:#FFFFFF!important}
body.intro .bigpin.open .bp-b::before{-webkit-mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat!important;mask-composite:exclude!important}   /* opened on the splash: the app's own outline, whole, open at the middle of its foot where the tail joins (one shape, as in the app) */
/* Oct 23: on the splash the cursor is the app's: always the magnifier (no turning into the three dots, no prints), and drawn as in the app
   (white bubble and tail, the app's outline open at the foot where the tail joins) in every state, so opening and closing change nothing but its width */
body.intro .bp-tx{display:none!important}
body.intro .bp-b{background:#FFFFFF!important}
body.intro .bp-b::before{-webkit-mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.24' height='7'%3E%3Cpath d='M0 0H22.24L19.4 7H2.84Z'/%3E%3C/svg%3E") 50% 100%/22.24px 7px no-repeat!important;mask-composite:exclude!important}
body.intro .bp-t{background:#FFFFFF!important;-webkit-clip-path:path('M14.84 36.5 H45.16 L34.39 63 Q30 73.8 25.61 63 Z')!important;clip-path:path('M14.84 36.5 H45.16 L34.39 63 Q30 73.8 25.61 63 Z')!important}
body.intro .bigpin .bp-ic .mg{transform:none!important}
body.intro .bigpin .bp-ic .dt{opacity:0!important}
body.intro .bp-tx2{display:none!important}
/* Oct 23: on the splash the cursor holds still (no floating), so the how-to's moves read true */
body.intro .bigpin,body.intro .bigpin.drift,body.intro .bigpin .bp-b,body.intro .bigpin .bp-t{animation:none!important}
.tut-pl .fade{transition:opacity .22s ease}
.tut-tap{position:absolute;left:50%;top:calc(50% - 37px);width:44px;height:44px;margin:-24px 0 0 -24px;border-radius:50%;border:3px solid var(--tq);background:rgba(17,17,17,.16);opacity:0;pointer-events:none}
.t2.on .tut-tap{animation:tutTap .6s ease-out .1s}
.t3.on .tut-tap{animation:tutHold 1.6s ease-in-out .2s}
@keyframes tutHold{0%{opacity:0;transform:scale(1.4)}20%{opacity:1;transform:scale(1)}70%{opacity:1;transform:translateY(18px) scale(.9)}100%{opacity:0;transform:translateY(24px) scale(.9)}}
@keyframes tutTap{0%{opacity:0;transform:scale(1.4)}35%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
/* steps 2 and 3 play the cursor's own animations (press, bury and rise again; open into the search and close) */
#rtFade{position:fixed;inset:0;z-index:860;background:#FFFFFF;opacity:0;pointer-events:none;transition:opacity .3s ease}
#rtFade.on{opacity:1;transition:opacity .28s ease}
/* Oct 23: every round button is 48px (enough for iOS's 44 and Android's 48 touch areas); the photo stays 56 */
#viewTog,#menuBtn,#pvTop,#pvShare,#meBtn{width:48px!important;height:48px!important}
#viewTog{margin-left:-24px!important}
#meBtn{margin-left:-24px!important}
#viewTog svg{width:30px!important;height:30px!important;margin:-16px 0 0 -16px!important}
#menuBtn svg,#pvTop svg{width:30px!important;height:30px!important}
#pvShare svg{width:28px!important;height:28px!important}
#meBtn svg{width:28px!important;height:28px!important}
.sri{width:48px!important;height:48px!important}
.sri svg{width:26px;height:26px}
.sr-tab{width:64px!important;height:52px!important;border-radius:0 26px 26px 0!important}
#vKeep{height:48px!important;border-radius:24px!important;padding:0 24px!important}
/* Oct 23: every step's words sit under the marker (the space above is the title's), the arrow coming up from them; clear of the red bar */
.tut .tut-s .tut-t{left:32px!important;right:32px!important;top:calc(50% + 76px)!important;bottom:auto!important;text-align:center!important;white-space:normal!important;max-height:calc(50% - 76px - var(--sbh, 80px) - 24px);overflow:hidden}
.tut .tut-s .tut-a{left:calc(50% + 20px)!important;top:calc(50% - 10px)!important;width:70px!important;height:76px!important}
body.intro.tutrun .skyev{opacity:0!important;transition:opacity .3s ease!important}   /* the steps start: any event on the splash goes */
/* Oct 23: the survey is a place of its own: behind it everything goes white (no map, no buttons) */
/* on the splash the bar's bubble keeps still */
.inst{position:fixed;inset:0;z-index:2700;display:flex;align-items:center;justify-content:center;padding:24px;background:#FFFFFF radial-gradient(circle, rgba(17,17,17,.16) .8px, transparent 1.3px) 0 0/12px 12px;--tq:#1E1E1E}
.inst[hidden]{display:none}
.inst-c{width:100%;max-width:400px;min-height:50vh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.inst-t{margin:0;text-align:center;font-family:Literata,serif;font-weight:600;font-size:28px;line-height:32px;color:#1E1E1E}
.inst-v{display:flex;flex-direction:column;gap:16px}
.inst-v[hidden]{display:none}
.inst-s{display:grid;grid-template-columns:28px 1fr;column-gap:8px;row-gap:8px;align-items:center}
.inst-h{margin:0;font-family:Kalam,'Segoe Print','Bradley Hand',cursive;font-size:18px;line-height:32px;color:var(--tq)}
.inst-s .tut-n{margin:0}
.inst-shot{grid-column:1 / -1;border-radius:16px;background:#F2F2F2;box-shadow:inset 0 0 0 1px rgba(17,17,17,.16);margin-bottom:48px}
.ib-on,.is-on{position:relative}
.inst-a{position:absolute;left:calc(50% - 32px);top:calc(100% - 4px);width:56px;height:61px;fill:none;stroke:var(--tq);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none}
.is-on .inst-a{left:auto;right:-8px}
.inst-a path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.55,1) .4s}
.inst-a path.hd{transition-delay:1s;transition-duration:.25s}
.inst-s2 .inst-a path{transition-delay:1.6s}
.inst-s2 .inst-a path.hd{transition-delay:2.2s}
.inst.on .inst-a path{stroke-dashoffset:0}
.inst-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;color:#1E1E1E}
.ib-u{flex:1;min-width:0;padding:8px 16px;border-radius:10px;background:#FFFFFF;font-size:14px;line-height:16px;color:#767676;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-ic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:32px;color:#1E1E1E;border-radius:50%}
.ib-on,.is-on{box-shadow:0 0 0 3px var(--tq);color:var(--tq)!important}
.inst-sheet{display:flex;flex-direction:column;padding:8px}
.is-row{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-radius:10px;font-size:18px;line-height:32px;color:#1E1E1E}
.is-row.is-on{background:#FFFFFF;margin:4px 0}
.inst-f{margin:0;text-align:center;font-size:18px;line-height:32px;color:#1E1E1E}
.inst .btn{width:100%;min-height:48px;background:#1E1E1E!important;color:#FFFFFF!important}
/* Oct 23: under your photo, a pill in the outline's colour with how many pins you have, centred on the photo's foot (text black or white by contrast, white first) */
#side .ava-c{position:relative}   /* Oct 23: the four price ranges, two by two, each on one line */
/* Oct 23: on the splash only, over the red bar: the how-to's handwriting, bold, tilted with the bar's top edge (2.5°, rising to the right), 16px above its middle */
/* Oct 23 (later): the menu column: Tu, Preferências and Legal from 32px under the panel's header line, Roteiros alone at the foot; the header's room under its title 16px (was 24) */
.sec-hd{padding-bottom:16px!important}
.sr-ic{top:122px!important;bottom:50px!important;transform:none!important;left:0;right:0!important;width:auto!important}   /* Roteiros 40px up from the foot */   /* Oct 24: Tu, Preferências and Legal 20px lower, so no line of their panels meets the tab of the one open */
/* Oct 23 (later): the column 4px narrower (72px): joined to the panel, its icons sit in the middle (as much room left as right); the X on the same line as the icons */
.srail{width:72px!important}
.side{right:84px!important;width:min(336px, calc(100vw - 96px))!important}
#sideRail #sideX{right:auto!important;left:calc(50% - 22px)!important}
.sr-tab{left:-2px!important;width:60px!important}
.sr-ic .sri[data-s="stats"]{order:8;margin-top:auto}   /* Oct 23: Estatísticas just above Roteiros, the usual 16px apart */
.sr-ic .sri[data-s="rot"]{order:9}
.side-pref .pf-lang + .pf-h{margin-top:16px!important}   /* the languages: 24px above and below */
.side-pref .pf-h{padding-top:24px!important}   /* Oct 24: a line to the title under it: 24px, as from the line to the languages */
/* Oct 23: Estatísticas: one card per measure (white, the panel's colour as a 2px line, the app's corners), taller or shorter as its content asks;
   totals big in dark grey; bars wear the category's own texture (its colour as their line), the rest the grey texture */
.st-b{display:flex;flex-direction:column;gap:0;padding:0 0 48px}
.st-kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;padding:24px 0}
/* Oct 23 (later): no boxes: the topics are parted by the panel's full-width 2px lines, as in Preferências and the survey */
.st-c{position:relative;padding:24px 0}
.st-c::before,.st-kpis + .st-c::before{content:'';position:absolute;top:0;left:-16px;right:-16px;height:2px;background:var(--sc,#1E1E1E);pointer-events:none;transition:background .3s ease}
.st-t{margin:0;font-size:18px;line-height:32px;font-weight:600;color:#1E1E1E}
.st-s{margin:4px 0 0;font-size:14px;line-height:16px;color:#767676}
.st-n{margin:8px 0 0;font-family:Literata,serif;font-weight:600;font-size:40px;line-height:44px;color:#1E1E1E;font-variant-numeric:tabular-nums}
.st-k .st-t{font-weight:600;color:#1E1E1E}
.st-k .st-n{margin-top:4px}
.st-bars{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.st-row{display:grid;grid-template-columns:24px 1fr auto;column-gap:8px;row-gap:4px;align-items:center}
.st-row .ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.st-row .nm{min-width:0;font-size:14px;line-height:16px;color:#1E1E1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-row .v{font-size:14px;line-height:16px;font-weight:600;color:#1E1E1E;text-align:right;font-variant-numeric:tabular-nums}
.st-row .br{grid-column:2 / -1;height:20px;border-radius:10px;background:#F2F2F2;overflow:hidden}
.st-row.noic{grid-template-columns:1fr auto}
.st-row.noic .br{grid-column:1 / -1}
.st-row .br i{display:block;height:100%;width:0;min-width:32px;border-radius:10px;box-sizing:border-box;background:var(--tx,none);background-size:var(--ts,auto);background-color:#FFFFFF;box-shadow:inset 0 0 0 2px var(--c,#767676);transition:width .8s var(--ease)}
.st-row .br i.g{background:var(--txg,none);background-size:var(--ts,auto);background-color:#FFFFFF}
.st-mini{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.st-mini b{display:block;font-family:Literata,serif;font-size:28px;line-height:32px;color:#1E1E1E;font-variant-numeric:tabular-nums}
.st-mini span{display:block;margin-top:4px;font-size:14px;line-height:16px;color:#767676}
.st-cols{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:16px}
.st-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.st-col i{display:block;width:100%;min-height:4px;border-radius:8px 8px 4px 4px;box-sizing:border-box;background:var(--txg,none);background-size:var(--ts,auto);background-color:#FFFFFF;box-shadow:inset 0 0 0 2px #767676;transition:height .8s var(--ease)}
.st-col i.now{background:var(--tx,none);background-size:var(--ts,auto);background-color:#FFFFFF;box-shadow:inset 0 0 0 2px var(--c,#767676)}
.st-col b{font-size:14px;line-height:16px;color:#1E1E1E;font-variant-numeric:tabular-nums}
.st-col span{font-size:14px;line-height:16px;color:#767676}
.st-empty{margin:0;font-size:18px;line-height:32px;color:#767676}
/* Oct 24: trying Fraunces (black, upright, soft and wonky) for the app's name on the splash and the roteiro's title on the map */
#intro .w,.logo span{font-family:Fraunces,Literata,serif!important;font-weight:600!important;font-style:normal!important}
.fresh-dot{display:inline-block;width:8px;height:8px;margin:0 0 4px 8px;border-radius:50%;background:#D0281C;vertical-align:middle}
#sideRail .sri.dot{position:relative}
#sideRail .sri.dot::after{content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#D0281C;z-index:2}
#vLang{position:fixed;z-index:850;left:22px;bottom:calc(16px + var(--sbh));width:48px;height:48px;padding:0;border:0;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:#1E1E1E;font:600 14px/1 Figtree,system-ui,sans-serif;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
body.viewer #vLang{display:flex}
body.viewer:not(.mine):not(.detopen):not(.dir) #vLang{bottom:calc(16px + var(--sbh) + 48px + 16px)}   /* above Guardar dicas, 16px apart */
body.intro #vLang,body.detopen #vLang,body.dir #vLang{opacity:0;pointer-events:none}
body.listopen #vLang{z-index:875}
/* Oct 24: in a shared link, the bottom left holds two glass circles on the share button's line: PT/EN at the corner, the floppy (Guardar dicas) beside it, 16px apart */
#vKeep{width:48px!important;height:48px!important;padding:0!important;border-radius:50%!important;left:86px!important;justify-content:center;align-items:center;gap:0!important;font-size:0}
#vKeep svg{position:absolute;transition:transform .45s cubic-bezier(.3,0,.3,1),opacity .2s ease}
#vKeep .vk-ck{opacity:0;transform:rotateY(90deg)}
#vKeep.done .vk-fl{opacity:0;transform:rotateY(-90deg)}
#vKeep.done .vk-ck{opacity:1;transform:none;transition-delay:.2s}
#vKeep:disabled{opacity:1!important}
#vKeep.tap .vk-fl{animation:vkDip .5s cubic-bezier(.3,0,.3,1)}
#vKeep.tap .vk-sh{animation:vkSh .5s cubic-bezier(.3,0,.3,1)}
@keyframes vkDip{0%,100%{transform:translateY(0)}40%{transform:translateY(3px) scale(.94)}}
@keyframes vkSh{0%,100%{transform:translateX(0)}45%{transform:translateX(3px)}}
body.viewer:not(.mine):not(.detopen):not(.dir) #vLang{bottom:calc(16px + var(--sbh))!important}
#vLang.flip{animation:vlFlip .4s cubic-bezier(.45,0,.55,1)}
@keyframes vlFlip{0%{transform:perspective(200px) rotateY(0)}50%{transform:perspective(200px) rotateY(90deg)}100%{transform:perspective(200px) rotateY(0)}}
#lgBy{font-size:18px!important;line-height:32px!important}   /* Oct 24: the line under the map's title 2px smaller, so a longer first name still fits on one line (else it wraps) */
/* Oct 24: your preview shows what the friend gets: the PT/EN circle and the floppy too */
body.preview #vLang,body.preview #vKeep{display:flex}
body.preview.detopen #vLang,body.preview.detopen #vKeep,body.preview.dir #vLang,body.preview.dir #vKeep{display:none}
/* Oct 24: a small solid black marker after the app's name (not on the roteiro titles), set high like a trademark sign */
#intro .w::after{content:'';display:inline-block;width:.42em;height:.43em;margin-left:.015em;vertical-align:.52em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 21 80 82'%3E%3Cpath d='M50.14 77.575 H48 A27.575 27.575 0 0 1 48 22.425 H72 A27.575 27.575 0 0 1 72 77.575 H69.86 L62.45 96 Q60 101.2 57.55 96 Z M33 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 ZM53 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 ZM73 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 Z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 21 80 82'%3E%3Cpath d='M50.14 77.575 H48 A27.575 27.575 0 0 1 48 22.425 H72 A27.575 27.575 0 0 1 72 77.575 H69.86 L62.45 96 Q60 101.2 57.55 96 Z M33 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 ZM53 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 ZM73 50 a7 7 0 1 0 14 0 a7 7 0 1 0 -14 0 Z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat}
/* Oct 24: trying the phone on its side: no closed beta bar; the title and its line on the left, centred on the height; the cursor on the right; the pins in between */
@media (orientation: landscape) and (max-height: 540px) {
  body:not(.landsp){--sbh:0px!important}   /* Oct 24: no help on its side */
  .logo,.logo.free,body.viewer .logo,body.preview .logo{display:none!important}   /* Oct 24: on its side, no title and no line under it: just the map */
  .logo,.logo.free,body.viewer .logo,body.preview .logo{top:calc(50% - 32px)!important;transform:translateY(-50%);left:calc(env(safe-area-inset-left) + 16px)!important;right:auto!important;width:auto!important;max-width:46vw!important;padding:0!important;align-items:flex-start!important;justify-content:flex-start!important}
  .logo .tap{justify-content:flex-start!important}
  .logo.by,.logo.by.al-l,.logo.by.al-r{align-items:flex-start!important}
  .logo span{font-size:28px!important;line-height:32px!important;text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .lg-by,#lgBy{margin-left:0!important;margin-right:0!important;text-align:left!important;white-space:nowrap;max-width:46vw}
  /* clear of the camera on either side: the controls keep the safe area */
  .vf:not(.mt){right:calc(env(safe-area-inset-right) + 16px)!important}
  #pvTop{left:calc(env(safe-area-inset-left) + 22px)!important}
  #menuBtn{right:calc(env(safe-area-inset-right) + 22px)!important}
  #pvShare{right:calc(env(safe-area-inset-right) + 22px)!important}
  #vLang{left:calc(env(safe-area-inset-left) + 22px)!important}
  #vKeep{left:calc(env(safe-area-inset-left) + 86px)!important}
  body:not(.landsp) .bigpin:not(.open){top:calc(50% + 56px)!important}   /* the cursor in the middle of the screen */
  body.preview:not(.landsp) #pvClose2{top:calc(env(safe-area-inset-top) + 24px)!important;bottom:auto!important;left:calc(env(safe-area-inset-left) + 144px)!important;transform:none!important;height:48px!important}   /* × Preview beside the map type pill */
}
/* Oct 24: the map type and filter drop-downs stop 16px above the bottom buttons (which sit 16px above the beta bar, 48px tall); what doesn't fit scrolls inside */
.vf{max-height:calc(100% - env(safe-area-inset-top) - 24px - var(--sbh, 0px) - 80px)!important}
/* Oct 24: the splash has no landscape: with the phone on its side, the whole page turns a quarter so the splash stands as it does upright,
   its top towards the camera (fixed elements follow the turned body, which becomes their frame) */
body.intro.landsp,body.introleave.landsp{position:fixed;left:50%;top:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(var(--sprot,-90deg));overflow:hidden}
body:not(.betaoff) #intro .cr{visibility:hidden}   /* Oct 24: the credit moves into the beta bar on the splash */
.st-cr{display:none}
body.intro .st-cr{display:block;position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 8px);font:400 14px/16px Figtree,system-ui,sans-serif;color:rgba(255,255,255,.72);text-align:center;pointer-events:none}   /* the bubble and the words a little higher, the credit under them, 8px from the foot */
/* Oct 24: the help: an i button left of the share button (bottom right in the app); on, it turns black with a white i and a random
   category's 6px ring, the map pales a little and every control on screen gets a few blue handwritten words with a blue arrow to it */   /* Oct 24: on, the help's own colours: the words' blue as its ring, dots in the blocks' light blue on a 45° grid, a little bigger; the i in the words' blue */   /* Oct 24: on, it wears the ring's category texture, as small as on the edge dots; the i stays black */
@keyframes hpDot{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
#toast.hop{animation:tHop .7s cubic-bezier(.3,0,.3,1)}
@keyframes tHop{0%{translate:0 0}25%{translate:0 -8px}45%{translate:0 0}65%{translate:0 -4px}85%,100%{translate:0 0}}   /* in the menu: words and arrows over the panel */
body.listopen .logo{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}   /* Oct 24: in the list, no title and no line under it: more room for the cards */
/* Oct 24: the help on floats over everything and never goes, whatever opens, so it can be turned off anywhere; off, it shows only on the map */
.tgl{flex:0 0 64px;position:relative;width:64px;height:28px;padding:0;border:0;border-radius:14px;background:#F2F2F2;cursor:pointer;transition:background .3s ease,transform .22s var(--out)}
.tgl i{position:absolute;left:2px;top:2px;width:38px;height:24px;border-radius:12px;background:#FFFFFF;box-shadow:0 2px 6px rgba(17,17,17,.16);transition:transform .35s cubic-bezier(.3,0,.3,1)}
.tgl.on{background:var(--sc,#1E1E1E)}
.tgl.on i{transform:translateX(22px)}   /* Oct 24: the i's own ring (6px), 2px bigger words, a quick steady pulse */
@keyframes hpHint{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}   /* Oct 24: the chosen block is never under the dimming, wherever it is (the menu has its own layer) */
/* Oct 24: tapped, the block grows with a quick little bump; its words read 2px bigger */
@keyframes hpBump{0%{transform:scale(1)}55%{transform:scale(1.17)}100%{transform:scale(1.11)}}
/* Oct 24: help on = the app as it will be: no beta bar (and so no survey), the buttons settle where they will sit in the final version */
#meBtn,#pvShare,#vKeep,#vLang{transition:transform .22s var(--out),opacity .3s ease,bottom .45s cubic-bezier(.3,0,.3,1),right .45s cubic-bezier(.3,0,.3,1),left .45s cubic-bezier(.3,0,.3,1)}
#meBtn.press.down,#pvShare.press.down,#vKeep.press.down,#vLang.press.down{transition:transform .1s ease,opacity .3s ease,bottom .45s cubic-bezier(.3,0,.3,1)}
.leaflet-bottom{transition:bottom .45s cubic-bezier(.3,0,.3,1)}   /* Oct 24: as far from the bottom as from the left: centred in the corner */
#sideRotFoot{flex-direction:column;gap:16px}
#sideRotFoot .btn{flex:none!important;width:100%;min-width:0}   /* the panel is narrower beside the column: the two buttons stack, each full width */
/* Oct 22: map types are tiles too: 8px corners, like the roteiro cards */
.lk-c,.lk-c::after{border-radius:8px!important}
.mk13 .msz{scale:1}   /* Oct 23: the chosen marker keeps its size (the panel covers the map) */
.mv-lift .msz{scale:1.2;translate:0 -10px;transition:scale .2s var(--out),translate .2s var(--out)}   /* Oct 23: a pin lifted to be moved */
.mv-lift{cursor:grabbing;z-index:2000!important}
.leaflet-marker-icon{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pf-foot{display:flex;gap:16px;margin-top:auto;padding-top:48px}
.pf-foot .btn{flex:1;height:52px}
.pf-foot .btn.secondary{background:#F2F2F2;color:#1E1E1E}
.pf-foot .btn.primary{background:#1E1E1E;color:#FFFFFF}   /* Oct 22: the app's primary button: black, white letters */
.pf-foot .btn:disabled{opacity:.4}
.inl{border:0;padding:0;width:100%;color:#1E1E1E;box-shadow:0 6px 0 -4px var(--line)}   /* Oct 22: the line under it is drawn outside the field, so it takes no room */
/* Oct 22: the map's title keeps at least 4.5:1 over its map: black over the light maps, white over the dark ones (satellite) */
body:not(.light-map):not(.libopen) .logo #logoBtn,body:not(.light-map):not(.libopen) .logo #logoBtn span{color:#FFFFFF!important}   /* in the list too: the map is still behind it */
/* Oct 22: the map type control (consuming): the filter's twin, top left; a 52px circle that grows into a column */   /* Oct 22: closed, a pill with its word (Mapa), the filter's twin */
/* Oct 24: Tema and Mapas: the panel opens wider, two tabs on top; each theme shown by a little swatch of its own look */
/* Oct 24: two drop-downs, two twins: the same pill, the same width, each with its chevron */
#vfBtn{width:136px}   /* Oct 25: one theme only: no Tema/Mapas tabs */
/* Oct 24: the theme list: a row each — a little square in that theme's own look (its "Aa" in its typeface and colours), the letter to its right */
/* the chosen one: ringed in the current theme's own selection colour */
/* Oct 22: in the menu's head the name sits centred on the photo and the line under it (Porto, Portugal.) centred on the language tag, so the
   two are well apart and easy to tap one by one */
.side-top .who-c{align-self:flex-start!important;padding-top:8px!important;gap:0!important}
.side-top .who-c .who{padding:0!important}
.side-top .who-c .who{min-height:44px;justify-content:center}
#pvClose2{min-height:44px}
.tgl{position:relative}
.tgl::after{content:'';position:absolute;inset:-8px -4px}
.lg-seg .lgo,.stab{min-height:44px}   /* Oct 25: touch areas at least 44px */
.side-top .who-c .side-nm{line-height:32px}
.side-top .who-c .side-city{margin:16px 0 0!important;line-height:24px}

/* Oct 22: the Preview button leaves the corner (the map type takes it): centred at the foot, in the cursor's thumb zone, glass, no outline;
   the closed beta stamp moves up above it in the preview */
#pvClose2{top:auto!important;bottom:calc(env(safe-area-inset-bottom) + 24px)!important;left:50%!important;right:auto!important;transform:translateX(-50%);
  background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:0!important;box-shadow:none!important;color:#1E1E1E!important}
#pvClose2.press.down{transform:translateX(-50%) scale(1.04)}
#pvClose2{color:#D0281C!important}   /* Oct 25: a shade darker, 4.5:1 on white */
/* Oct 22: a shared roteiro can be kept: the same glass pill, under the title block, only in a shared link */
#vKeep{display:none;position:fixed;z-index:850;left:22px;bottom:22px;flex:none;width:auto;height:56px;gap:8px;padding:0 24px;border-radius:28px;white-space:nowrap;font-size:18px;font-weight:600;   /* Oct 23: bottom left, the share button's twin on the other corner */
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:0;box-shadow:none;color:#1E1E1E}
#vKeep.press.down{transform:scale(1.04)}
body.viewer .leaflet-bottom.leaflet-left{bottom:86px}   /* the map's credits move up above it */
body.viewer #vKeep{display:flex}
body.viewer.detopen #vKeep,body.viewer.dir #vKeep,body.viewer.mine #vKeep{display:none}
body.viewer.listopen #vKeep{z-index:875}   /* on the list too, like the share button */
#vKeep:disabled{opacity:1;color:#1E1E1E}
/* Oct 22 (later): the pill sits under the title block, centred on it, 24px below the line under the name; half its old padding */
#pvClose2{top:var(--pvy,calc(env(safe-area-inset-top) + 200px))!important;bottom:auto!important;left:var(--pvx,50%)!important;height:38px!important;padding:0 8px 0 8px!important}   /* Oct 22: the X and Preview in the stamp's red */
/* Oct 22: the seagull's wing flaps (up and down from its root) while it flies; it holds still while it hangs in the air */
.gull .gw{transform-box:view-box;transform-origin:30px 23px;animation:gflap .38s ease-in-out infinite}
.gull.glide .gw{animation:none;transform:rotate(-10deg)}
@keyframes gflap{0%,100%{transform:rotate(8deg) scaleY(.75)}50%{transform:rotate(-24deg)}}
.gull .gh1,.gull .gh2,.gull .gm{transition:opacity .15s ease}
/* Oct 22: panels never scale: like the menu sliding in from the side, every bottom panel (a pin's details, the add and edit forms,
   the library) slides up from below the screen at full opacity, and slides back down to close, easing in and out */
.form,#det,#form.page,.lib:not(#vlist){opacity:1!important;transform:translateY(calc(100% + 24px))!important;transform-origin:50% 100%!important;
  transition:transform .5s var(--ease),visibility 0s .5s!important}
.form.open,#det.open,#form.page.open,.lib.open:not(#vlist){transform:none!important;transition:transform .5s var(--ease),visibility 0s!important}
#det.swap,#form.page.swap{transition:none!important}