/* ==========================================================
   THE GREENHOUSE (greenhouse.html)
   Layered on learn.css + zones.css + eco.css, so the stage,
   card, dock, chips and passport match the Ecosystem Explorer.
   This file adds the hero, the plant card badges, the name tag
   toggle, the state flower tile map and the picture quiz.
   ========================================================== */
.gh-page{background:#f1ead8}

/* ---------- hero: painted greenhouse panorama behind the title ---------- */
.gh-hero{padding-bottom:calc(var(--gh-ground,300px) + .4rem)}
.gh-hero h1{font-size:clamp(2.2rem,5.4vw,3.8rem)}
.gh-art{background:linear-gradient(180deg,#bfdcea 0%,#dcecee 45%,#eef0de 100%)}
.gh-art .zh-pano{top:0;height:100%}
.gh-hero .nb-lede{max-width:38rem;margin-inline:auto}

/* ---------- stage extras ---------- */
.gh-stage{background:#dfe9dc}
.gh-tags{pointer-events:auto;display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.35rem .85rem;border-radius:999px;border:2px solid rgba(23,63,49,.25);background:rgba(255,250,236,.92);color:#173f31;font:600 .88rem/1 var(--display);cursor:pointer;box-shadow:0 4px 12px rgba(30,25,10,.16)}
.gh-tags[aria-pressed="false"]{background:rgba(23,63,49,.85);color:#fff4d6;border-color:transparent}

/* ---------- plant card ---------- */
.gh-sci{margin:-.25rem 0 .45rem;font:italic 400 1.02rem/1.3 var(--read);color:#5a6b58}
.gh-sci:empty{display:none}
.gh-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .35rem}
.gh-badges:empty{display:none}
.gh-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .7rem;border-radius:999px;font:600 .82rem/1.2 var(--display);border:1.5px solid transparent}
.gh-badge.native{background:#e6f1d8;color:#3d6a24;border-color:#b9d49a}
.gh-badge.brought{background:#fbeede;color:#9a5a2a;border-color:#e8c9a4}
.gh-badge.state{background:#fff3cf;color:#8a5a0c;border-color:#e8c97a}
.gh-badge.alert{background:#fde8df;color:#a4401f;border-color:#eeb39a}
.gh-badge.home{background:#173f31;color:#ffe9a0}
.gh-badge .src-tag{margin-left:.15rem}
.gh-caution{background:rgba(253,234,226,.95);border-color:#e59a7a}.gh-caution>b{color:#b9502f}
.gh-card .eco-block[hidden]{display:none}
.gh-plants .ecb-name{overflow-wrap:break-word;hyphens:auto;min-width:0}
.gh-zone{scroll-margin-top:84px}
.gh-plants{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.gh-dock{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}

/* ---------- state flower tile map ---------- */
.gh-map{max-width:1100px;margin:2.6rem auto 0;padding:0 clamp(.75rem,3vw,1.5rem);text-align:center}
.gh-map h2{margin:.2rem 0 .3rem;color:#173f31;font-size:clamp(1.7rem,3.6vw,2.5rem)}
.gh-map-lede{margin:0 auto 1rem;max-width:36rem;font-size:1.05rem}
.gh-tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(3px,.6vw,7px);padding:clamp(.6rem,2vw,1.3rem);border-radius:24px;background:#fffaf0;background-image:radial-gradient(circle at 20% 10%,rgba(143,195,214,.18),transparent 55%),radial-gradient(circle at 85% 90%,rgba(95,138,62,.14),transparent 55%);border:2px solid #e0cfa6;box-shadow:0 8px 0 #e7d9b6}
.gh-tile{position:relative;aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:0;padding:2px;border-radius:clamp(6px,1vw,12px);border:2px solid #d8c9a3;background:#fff;color:#173f31;font:700 clamp(.56rem,1.2vw,.86rem)/1 var(--display);cursor:pointer;transition:transform .12s,border-color .12s,background .12s;min-width:0}
.gh-tile img{width:78%;height:auto;max-height:72%;object-fit:contain;pointer-events:none}
.gh-tile span{margin-top:-2px;letter-spacing:.02em}
.gh-tile:hover{transform:translateY(-2px);border-color:#b7a06a;background:#fffdf6}
.gh-tile.none{background:#f4efe3;border-style:dashed;color:#9a8f78;font-weight:600}
.gh-tile.met{background:#f3f7ea;border-color:#b7cc92}
.gh-tile.home{border-color:#eea52c;background:#fff3cf;box-shadow:0 0 0 3px rgba(238,165,44,.35)}
.gh-tile.home::after{content:"Home";position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:.08rem .4rem;border-radius:999px;background:#173f31;color:#ffe9a0;font:600 .58rem/1.3 var(--display);white-space:nowrap}
.gh-tile[aria-current="true"]{border-color:#173f31;box-shadow:0 0 0 3px rgba(23,63,49,.25)}
.gh-usmap{padding:clamp(.4rem,1.6vw,1.1rem);border-radius:24px;background:#fffaf0;background-image:radial-gradient(circle at 20% 10%,rgba(143,195,214,.2),transparent 55%),radial-gradient(circle at 85% 90%,rgba(95,138,62,.14),transparent 55%);border:2px solid #e0cfa6;box-shadow:0 8px 0 #e7d9b6}
.gh-usmap canvas{display:block;width:100%;touch-action:manipulation}
.gh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gh-credit{margin:.4rem 0 0;font-size:.78rem;color:#8a7a5a}
.gh-map-pick{margin:.9rem auto 0;min-height:1.6em;font:600 1.1rem/1.35 var(--display);color:#173f31}

/* ---------- picture quiz ---------- */
.gh-qpic{width:132px;height:132px;margin:.4rem auto .2rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#fffdf6,#efe2c2);box-shadow:inset 0 0 0 4px #fff,0 4px 14px rgba(60,40,20,.16)}
.gh-qpic:empty{display:none}
.gh-qpic img{width:110px;height:110px;object-fit:contain}

@media(max-width:1099px){.gh-dock{grid-template-columns:1fr}}
@media(max-width:620px){
  .gh-plants{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-tags{font-size:.8rem;min-height:36px;padding:.3rem .7rem}
  .gh-tile{border-width:1.5px;border-radius:6px}
  .gh-tile.home::after{font-size:.5rem;top:-8px}
  .gh-qpic{width:110px;height:110px}.gh-qpic img{width:92px;height:92px}
}