/* app/css/forest-map.css
   Styles for the illustrated, navigable forest map (Leaflet + L.CRS.Simple)
   and its companion tree info card. Design tokens come from app.css (:root).
*/

.forest-app{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.forest-map-wrapper{
  position: relative;
  background: var(--dark);
  border-radius: 18px;
  border: 1px solid var(--on-dark-border);
  overflow: hidden;
  height: clamp(360px, 62vh, 640px);
  box-shadow: 0 10px 30px rgba(20,26,16,.25);
}

.forest-map{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--dark);
}
.forest-map:focus{ outline: 3px solid var(--accent-on-dark); outline-offset: -3px; }

@media (min-width: 820px){
  .forest-map-wrapper{ height: clamp(420px, 68vh, 720px); }
}


.forest-dev-warning{
  position: absolute;
  z-index: 1200;
  top: 10px;
  left: 10px;
  right: 10px;
  max-width: 480px;
  background: #4a3a12;
  color: #f2e6c8;
  border: 1px solid #8a6a24;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: none;
}

/* Area outlines/labels: prominent at the distant/overview tier (they're the
   main orientation cue when individual trees are just clusters), quieter
   once the visitor has zoomed into medium/close tiers and canopies carry
   the detail instead. Tiers are set by tree-renderer.js on #forest-map. */
.forest-area-label{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--on-dark-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
}
.forest-map.forest-tier-medium .forest-area-label,
.forest-map.forest-tier-close .forest-area-label{
  opacity: .35;
}

/* ---------------------------------------------------------------------
   Individual tree canopies (medium + close zoom tiers)
   --------------------------------------------------------------------- */

/* Reset Leaflet's default divIcon chrome — everything below is custom. */
.forest-tree-icon-wrapper{
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.forest-tree-marker{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}
.forest-tree-marker:focus-visible{
  outline: 3px solid var(--accent-on-dark);
  outline-offset: 3px;
  border-radius: 50%;
}

.tree-canopy-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* clicks/taps are handled by the button, not the image */
  transition: filter .12s ease;
}
.forest-tree-marker:hover .tree-canopy-img{
  filter: brightness(1.12);
}
.canopy-fallback{
  border-radius: 50%;
  /* backgroundColor set inline in JS from the species' baseColor when the
     canopy asset fails to load — see tree-renderer.js. */
}

/* Ownership indicator: a subtle ring at ground level, never a canopy
   recolor. Kept hidden except at the close tier, where there's enough room
   to show it without cluttering medium-zoom scenes. */
.tree-ground-ring{
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 78%;
  height: 22%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid var(--accent-on-dark);
  opacity: 0;
  pointer-events: none;
}
.forest-map.forest-tier-close .forest-tree-marker.owned .tree-ground-ring{
  opacity: .85;
}

/* Selection indicator — simplified at medium zoom, fuller at close zoom. */
.forest-map.forest-tier-medium .forest-tree-marker.active{
  outline: 2px solid rgba(201,164,104,.8);
  outline-offset: 2px;
}
.forest-map.forest-tier-close .forest-tree-marker.active{
  outline: 3px solid rgba(201,164,104,.9);
  outline-offset: 3px;
  filter: drop-shadow(0 0 6px rgba(201,164,104,.5));
}

/* ---------------------------------------------------------------------
   Aggregated woodland-mass clusters (distant zoom tier)
   --------------------------------------------------------------------- */
.forest-cluster-icon-wrapper{
  background: transparent !important;
  border: none !important;
}
.forest-cluster-marker{
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.forest-cluster-marker:focus-visible{
  outline: 3px solid var(--accent-on-dark);
  outline-offset: 3px;
  border-radius: 50%;
}
.forest-cluster-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform .12s ease;
}
.forest-cluster-marker:hover .forest-cluster-img{
  transform: scale(1.08);
}

/* Individual canopies/clusters are absent in the distant tier's own layer,
   so no extra visibility rule is needed there beyond what tree-renderer.js
   mounts — see that module's buildClusters()/rebuildForTier(). */

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.forest-card-container{ min-height: 4px; }

.tree-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  max-width: 340px;
}
.tree-card-photo{
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 12px;
}
.tree-card-header{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.tree-card-title{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}
.stat-strip{ display:flex; gap: 18px; margin: 0 0 12px; flex-wrap: wrap; }
.stat-strip > div{ font-size: 12.5px; color: var(--text-dim); }
.stat-strip dt{ font-weight: 600; color: var(--text); }
.stat-strip dd{ margin: 0; }

.tree-card-body{ display:flex; gap: 8px; flex-wrap: wrap; }

.forest-auth-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.forest-auth-panel form{ display:flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.forest-auth-panel input{
  flex: 1;
  min-width: 200px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
}


/* Registered artwork is painted by the composition. Keep its centre clear. */
.forest-tree-marker.registered-artwork-marker {
  border: 1px solid rgba(239, 211, 154, .65);
  background: transparent;
  outline: none;
  filter: none;
}
.registered-artwork-marker .tree-ground-ring { display: none; }
.registered-tree-number {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -85%);
  display: grid; place-items: center;
  min-width: 23px; height: 23px;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 50%;
  border: 1px solid #f1d9a7;
  background: #25321e;
  color: #fff0cd;
  font: 600 11px/1 system-ui, sans-serif;
}
.forest-map .forest-tree-marker.registered-artwork-marker:hover,
.forest-map .forest-tree-marker.registered-artwork-marker.active,
.forest-map .forest-tree-marker.registered-artwork-marker:focus-visible {
  border: 2px solid #ffe6ac;
  outline: none;
  filter: none;
}
.registered-artwork-marker.owned .registered-tree-number { background: #596f39; }

/* Full-length woodland: portrait viewport, independent companion card. */
.forest-map-wrapper{width:100%;max-width:620px;height:auto;min-height:0;aspect-ratio:2850/5800;border:0;border-radius:0;margin-inline:auto;background:#20291b}
@media(min-width:900px){.forest-app{display:grid;grid-template-columns:minmax(0,620px) minmax(220px,300px);align-items:start;justify-content:center;gap:24px}.forest-map-wrapper{height:auto}.forest-card-container{position:sticky;top:24px}}
@media(max-width:599px){.forest-map-wrapper{min-height:0;aspect-ratio:2850/5800}}

/* Compact embedded overview; exploring moves into a viewport-sized dialog. */
.forest-map-wrapper[data-viewer-mode=compact]{width:min(100%,calc(64svh * 2850 / 5800));max-width:380px;grid-column:1;grid-row:1}
.forest-scroll-hint{margin:0;text-align:center;font-size:12px;color:var(--muted,#5e6957);grid-column:1;grid-row:2}
.forest-expand{position:absolute;z-index:1100;right:10px;top:10px;padding:9px 12px;border:1px solid #ffffff70;border-radius:8px;background:#f5f6efed;color:#243020;font:600 13px/1.3 system-ui;cursor:pointer;min-height:44px}
.forest-expand:focus-visible,.forest-collapse:focus-visible{outline:3px solid #a07a35;outline-offset:3px}
.forest-passive .leaflet-container,.forest-passive.leaflet-container{touch-action:pan-y pinch-zoom!important}
.forest-passive .leaflet-control-zoom{display:none}
.forest-fullscreen{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#edf0e7;color:#243020;overflow:hidden}
.forest-fullscreen::backdrop{background:#edf0e7}
.forest-fullscreen-header{height:64px;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:16px}
.forest-collapse{border:1px solid #bac4af;border-radius:8px;background:#fff;padding:10px 14px;min-height:44px;font:600 14px system-ui;cursor:pointer;color:inherit}
.forest-fullscreen-body{position:relative;height:calc(100dvh - 64px);display:flex;align-items:flex-start;justify-content:center;gap:24px;padding:0 12px max(12px,env(safe-area-inset-bottom));box-sizing:border-box}
.forest-fullscreen .forest-map-wrapper{flex:none;width:min(100%,calc((100dvh - 80px) * 2850 / 5800));max-width:none;margin:0}
.forest-fullscreen .forest-card-container{position:relative;top:auto;width:280px;max-height:100%;overflow:auto}
.forest-fullscreen .forest-card-container:empty{display:none}
@media(min-width:900px){.forest-app>.forest-card-container{grid-column:2;grid-row:1 / 3}}
@media(max-width:700px){.forest-fullscreen .forest-card-container:not(:empty){position:absolute;right:12px;bottom:16px;width:min(270px,calc(100% - 24px));max-height:36dvh;z-index:1200}.forest-fullscreen .tree-card{padding:12px}.forest-fullscreen .tree-card tree-photo-gallery{display:none}}

/* Immersive exploration: the map covers the entire screen; controls float above it. */
.forest-fullscreen-header{position:absolute;inset:0 0 auto;z-index:1400;height:auto;pointer-events:none;padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 62px}
.forest-fullscreen-header strong{display:none}
.forest-fullscreen-header .forest-collapse{pointer-events:auto;margin-left:auto;box-shadow:0 2px 12px #0003}
.forest-fullscreen-body{width:100%;height:100%;display:block;padding:0}
.forest-fullscreen .forest-map-wrapper{position:absolute;inset:0;width:100%;height:100%!important;aspect-ratio:auto!important;max-width:none;margin:0}
.forest-fullscreen .forest-card-container:not(:empty){position:absolute;top:auto;right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:240px;max-width:calc(100% - 24px);max-height:40dvh;overflow:auto;z-index:1200}
.tree-card{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px 10px;padding:10px;max-width:280px;box-shadow:0 3px 16px #0002}
.tree-card-photo{grid-row:1 / 3;width:68px;height:88px;margin:0;object-fit:cover;border-radius:6px}
.tree-card-header{margin:0;align-self:end}
.tree-card-title{font-size:15px;line-height:1.3}
.tree-card-body{grid-column:2;align-self:start}
.tree-card-body .button{font-size:12px;padding:7px 9px;min-height:36px;display:flex;align-items:center;justify-content:center}
.forest-fullscreen .tree-card{padding:10px;max-width:none}

/* Registered rings support the overview without drawing large circles over details. */
.forest-map .forest-tree-marker.registered-artwork-marker,
.forest-map .forest-tree-marker.registered-artwork-marker:hover,
.forest-map .forest-tree-marker.registered-artwork-marker.active,
.forest-map .forest-tree-marker.registered-artwork-marker:focus-visible{border:0;outline:0;filter:none}
.registered-artwork-marker::before{content:"";position:absolute;inset:0;box-sizing:border-box;border:1px solid rgba(239,211,154,.65);border-radius:50%;pointer-events:none;opacity:var(--registered-ring-opacity,1);transition:opacity 220ms ease}
.registered-artwork-marker.active::before,.registered-artwork-marker:focus-visible::before{border:2px solid #ffe6ac}
.forest-rings-zooming .registered-artwork-marker::before{opacity:0!important;transition:none}
.registered-artwork-marker.active .registered-tree-number,.registered-artwork-marker:focus-visible .registered-tree-number{background:#f1d9a7;color:#25321e;box-shadow:0 0 0 2px #25321e}
@media(prefers-reduced-motion:reduce){.registered-artwork-marker::before{transition:none}}

/* Numbers share the ring's zoom pause, while remaining visible at rest in detail. */
.registered-tree-number{transition:opacity 220ms ease}
.forest-rings-zooming .registered-tree-number{opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){.registered-tree-number{transition:none}}

/* Catalogue beside the embedded overview; fullscreen keeps its single selected card. */
.forest-app{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);align-items:start;gap:28px}
.forest-catalogue{grid-column:1;grid-row:1;min-width:0}
.forest-catalogue-heading{font:500 24px/1.2 'Fraunces',serif;margin:0 0 8px}
.forest-catalogue-hint{font-size:13px;margin:0 0 18px;color:var(--text-dim)}
.forest-catalogue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.forest-map-column{grid-column:2;grid-row:1;position:sticky;top:20px;min-width:0}
.forest-map-column .forest-scroll-hint{margin-top:12px}
.forest-app>.forest-card-container{display:none}
.forest-map-wrapper{scroll-margin-top:20px}
.forest-catalogue .tree-card{position:relative;max-width:none;box-shadow:none;transition:border-color 150ms,background 150ms}
.tree-card-select{position:absolute;inset:0;z-index:1;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.tree-card-select:focus-visible{outline:3px solid #a07a35;outline-offset:2px}
.forest-catalogue .tree-card-body{position:relative;z-index:2}
.forest-catalogue .tree-card.is-selected{border-color:#8c713b;background:#f5ecd7;box-shadow:0 0 0 1px #8c713b}
@media(max-width:1050px){.forest-catalogue-grid{grid-template-columns:1fr}}
@media(max-width:799px){.forest-app{grid-template-columns:minmax(0,1fr);gap:24px}.forest-map-column{grid-column:1;grid-row:1;position:static}.forest-catalogue{grid-column:1;grid-row:2}.forest-catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.forest-catalogue-grid{grid-template-columns:1fr}}

/* Touch exploration stays inside the full-window map, without browser fullscreen gestures. */
.forest-fullscreen{overscroll-behavior:none}
.forest-fullscreen .forest-map,.forest-fullscreen .forest-map *{touch-action:none!important}
.registered-marker-detail .registered-artwork-marker::before{display:none}
.registered-marker-detail .registered-tree-number{top:50%;transform:translate(-50%,-50%)}
.forest-rings-zooming .registered-artwork-marker{visibility:hidden;pointer-events:none}

/* Gentle terrain/water grading, limited to existing tiles: no pane-sized filter. */
.forest-map .leaflet-forest-base-pane-pane .leaflet-tile {
  filter: saturate(1.32) brightness(1.16);
}
.forest-map .leaflet-forest-river-pane-pane .leaflet-tile {
  filter: saturate(1.48) brightness(1.20);
}

/* First paint waits for the actual ground; no extra preview image or animation. */
.forest-map-wrapper.is-loading .forest-map { visibility: hidden; }
.forest-loading { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; padding:24px; background:#edf0e7; color:#425239; text-align:center; font-size:14px; z-index:1200; }
.forest-loading[hidden] { display:none; }