/*
 * Panel header buttons (⛶ fullscreen, — minimise, × close, 返回 back, drag).
 * Light panels: no box; icons in the panel's title colour on the panel's own
 * header background, every button 44px tall. Green / dark panels on desktop
 * (place / LIVE windows, card drawer): tinted squircles — a 36px translucent
 * orange-yellow square with a thin orange-yellow ring inside a 44px hit area,
 * orange-yellow icons, 8px visual gaps. Same 18px icon everywhere.
 * Panels keep their own surfaces, borders, shadows and title colours.
 * Also: NOW stills fill the panel width at their own ratio.
 */
:root{
  --panel-btn-size:44px;--panel-btn-icon:18px;--panel-btn-radius:10px;
  /* Light panels (species, topic, reading sheet, pickers): cream header, dark-green title. */
  --panel-btn-bg:#fffdfa;--panel-btn-fg:#17372f;
  --panel-btn-bg-hover:#edf1eb;--panel-btn-bg-active:#dae9db;--panel-btn-focus:#23745a;
}
/* Green / dark panels: orange-yellow (這一點 · title colour) tinted squircles. */
.map-float,.drawer{--panel-btn-fg:var(--sun,#f2b862);--panel-btn-focus:var(--sun,#f2b862);
  --panel-btn-tint:rgba(242,184,98,.14);--panel-btn-tint-hover:rgba(242,184,98,.26);--panel-btn-tint-active:rgba(242,184,98,.36);
  --panel-btn-ring:rgba(242,184,98,.5);--panel-btn-visual:36px;--panel-btn-visual-radius:10px}
.map-float{--panel-btn-base:transparent}
/* The drawer × sits on a photo: keep the scene green under the tint so it stays legible. */
.drawer{--panel-btn-base:rgba(28,58,50,.88)}

.primary-reading-tools button,
.map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close),
.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,
.map-island-close,.map-harvest-species-popover-close{
  box-sizing:border-box;flex:none;place-items:center;
  min-width:var(--panel-btn-size);min-height:var(--panel-btn-size);height:var(--panel-btn-size);
  border:0;border-radius:var(--panel-btn-radius);box-shadow:none;
  background:var(--panel-btn-bg);color:var(--panel-btn-fg);
  line-height:1;cursor:pointer;
  transition:background-color .12s ease;
}
/* Icon-only buttons: one 44px square hit area, icon centred. */
.primary-reading-tools :is(.map-overlay-drag-handle,.primary-reading-fullscreen,.primary-reading-minimize,button:last-child),
.map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close),
.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,
.map-island-close,.map-harvest-species-popover-close{display:grid;place-content:center;width:var(--panel-btn-size);min-width:var(--panel-btn-size);height:var(--panel-btn-size);min-height:var(--panel-btn-size);padding:0;margin-top:0;margin-bottom:0}
.primary-reading-tools .map-overlay-drag-handle{position:static;cursor:grab}
.primary-reading-tools .map-overlay-drag-handle svg{width:12px;height:var(--panel-btn-icon)}
:is(.primary-reading-tools,.map-float-head) :is(.primary-reading-fullscreen,.primary-reading-minimize,.map-float-fullscreen,.map-float-minimize) svg{width:var(--panel-btn-icon);height:var(--panel-btn-icon);display:block}
.map-float-head .map-float-fullscreen .icon-exit,html.is-map-fullscreen .map-float-head .map-float-fullscreen .icon-enter{display:none}
html.is-map-fullscreen .map-float-head .map-float-fullscreen .icon-exit{display:block}
.primary-reading-tools .primary-reading-fullscreen .icon-exit,.primary-reading-tools .primary-reading-fullscreen[aria-pressed="true"] .icon-enter{display:none}
.primary-reading-tools .primary-reading-fullscreen[aria-pressed="true"] .icon-exit{display:block}
/* × keeps its text (labels, tests) but is drawn as the same 18px, stroke-2 line icon as ⛶ and —. */
.primary-reading-tools button:last-child,
.map-float-head .map-float-close,
.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,
.map-island-close,.map-harvest-species-popover-close{font-size:0!important;color:var(--panel-btn-fg)}
.primary-reading-tools button:last-child::before,
.map-float-head .map-float-close::before,
:is(.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,.map-island-close,.map-harvest-species-popover-close)::before{
  content:"";display:block;width:var(--panel-btn-icon);height:var(--panel-btn-icon);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.primary-reading-tools button:hover,
.map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):hover,
:is(.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,.map-island-close,.map-harvest-species-popover-close):hover{background:var(--panel-btn-bg-hover)}
.primary-reading-tools button:active,
.map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):active,
:is(.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,.map-island-close,.map-harvest-species-popover-close):active{background:var(--panel-btn-bg-active)}
.primary-reading-tools button:focus-visible,
.map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):focus-visible,
:is(.map-wildlife-close,.map-route-close,.map-cluster-close,.drawer .x,.map-island-close,.map-harvest-species-popover-close):focus-visible{outline:2px solid var(--panel-btn-focus);outline-offset:-2px}

.map-cluster-menu-actions{display:flex;align-items:center;gap:2px;flex:none}
.map-cluster-menu-actions :is(.map-cluster-minimize,.map-cluster-close){box-sizing:border-box;appearance:none;-webkit-appearance:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:0!important;border-radius:10px;box-shadow:none!important;background:transparent;color:#174f42;outline:0;cursor:pointer}
.map-cluster-minimize{display:grid;place-items:center;font-size:0!important}
.map-cluster-minimize::before{content:none!important;display:none!important;-webkit-mask:none!important;mask:none!important}
.map-cluster-minimize svg{display:block;width:var(--panel-btn-icon);height:var(--panel-btn-icon)}
/* Same rounded, inset fold control on light readers and pickers; dark readers
   retain their warm tint. The dock restore control uses the same 18px glyph. */
.map-cluster-menu-actions .map-cluster-minimize,.primary-reading-tools .primary-reading-minimize{background:#edf1eb;background-clip:content-box;padding:4px;border-radius:14px}
.map-folded-windows>summary{border-radius:10px;outline-offset:-2px!important}
.map-float-head .map-float-locate{display:grid;place-items:center;box-sizing:border-box;flex:0 0 32px;width:32px;min-width:32px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:10px;background:transparent;color:#d5584c;cursor:pointer;touch-action:manipulation}
.map-float-locate svg{width:22px;height:22px;flex:none}
.map-float-locate:hover{background:rgba(213,88,76,.12)}
.map-float-locate:focus-visible{outline:2px solid #d5584c;outline-offset:-2px}
.map-cluster-menu-actions :is(.map-cluster-minimize,.map-cluster-close):hover{background:#edf1eb}
.map-cluster-menu-actions :is(.map-cluster-minimize,.map-cluster-close):focus-visible{outline:2px solid #23745a;outline-offset:-2px}
@media(max-width:760px){.map-cluster-menu-head{min-height:48px}.map-cluster-menu-head strong{min-width:0;overflow-wrap:anywhere}}

/* Tinted squircles on the green place / LIVE window header and the card drawer:
   the 4px transparent border keeps a 44px hit area around a 36px visual square. */
.map-float .map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close),.drawer .x{
  border:4px solid transparent;border-radius:calc(var(--panel-btn-visual-radius) + 4px);
  background:linear-gradient(var(--panel-btn-tint),var(--panel-btn-tint)) padding-box,linear-gradient(var(--panel-btn-base),var(--panel-btn-base)) padding-box;
  box-shadow:inset 0 0 0 1px var(--panel-btn-ring);color:var(--panel-btn-fg)}
.map-float .map-float-head :is(.map-float-minimize,.map-float-close){margin-left:-6px}
.map-float .map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):hover,.drawer .x:hover{background:linear-gradient(var(--panel-btn-tint-hover),var(--panel-btn-tint-hover)) padding-box,linear-gradient(var(--panel-btn-base),var(--panel-btn-base)) padding-box}
.map-float .map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):active,.drawer .x:active{background:linear-gradient(var(--panel-btn-tint-active),var(--panel-btn-tint-active)) padding-box,linear-gradient(var(--panel-btn-base),var(--panel-btn-base)) padding-box}
.map-float .map-float-head :is(.map-float-fullscreen,.map-float-minimize,.map-float-close):focus-visible,.drawer .x:focus-visible{outline:2px solid var(--panel-btn-focus);outline-offset:-4px}

/* NOW stills (refreshing camera images) fill the panel width at their own ratio:
   a 4:3 or panorama still inside a 16:9 box letterboxed down to ~70% width. */
.map-float .live-player-media:has(>img:not(.player-poster):not([hidden])){aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;display:block}
.map-float .live-player-media>img:not(.player-poster){position:static!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto 16/9!important;object-fit:fill!important}