/* v0.8.4 toolbar; the approved images already contain their button background. */
.brand{padding:7px 9px;border:0;border-radius:11px;box-shadow:none;flex-shrink:0;line-height:1.3;background:rgba(10,28,19,.78)}
.brand strong,.brand #activeMode{display:block;font-size:12px;white-space:nowrap}.brand #activeMode{font-size:10px;color:#b7cfc0;margin-top:1px}
#appBuild,#previewBuild{display:none!important}.topbar{align-items:center;justify-content:space-between;gap:4px}.top-actions{display:flex;gap:3px}
.top-actions .iconbtn{padding:0;border:0;background:transparent!important;box-shadow:none;width:46px;height:46px;border-radius:12px;flex-shrink:0;touch-action:manipulation}
.iconbtn img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.iconbtn:focus-visible{outline:2px solid #ffe39b;outline-offset:2px}#gridBtn[aria-pressed="true"]{filter:brightness(1.3);outline:2px solid #d8c681;outline-offset:-3px}
.more-menu{position:absolute;right:max(9px,env(safe-area-inset-right));top:calc(64px + var(--safe-top));z-index:100;width:min(275px,calc(100vw - 18px));max-height:calc(100dvh - 90px - var(--safe-top));overflow:auto;padding:6px;background:#102e22;border:1px solid #5c9277;border-radius:15px;box-shadow:0 12px 35px #0008}
.more-menu button{display:block;text-align:left;width:100%;min-height:46px;border:0;border-radius:9px;padding:10px 13px;background:transparent;color:#edf7ef;font:inherit;font-size:14px}.more-menu button:hover,.more-menu button:focus-visible{background:#244e39}
.city-plan{height:clamp(180px,46dvh,440px);position:relative;overflow:hidden;border:1px solid #73a280;border-radius:18px;background:#385d3b;touch-action:none}
#cityPlan{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.plan-zoom{position:absolute;left:9px;top:9px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0005}.plan-zoom button{width:44px;height:44px;background:#102e22e8;color:#fff;border:1px solid #6c9979;font-size:25px;touch-action:manipulation}
#planScale{position:absolute;bottom:10px;left:12px;font-size:11px;color:#f5f5dc;text-shadow:0 1px 4px #000;pointer-events:none}.plan-districts{margin-top:12px;padding:0 12px;border:1px solid #639278;border-radius:13px}.plan-districts summary{padding:14px 0;cursor:pointer;font-weight:600;min-height:44px}.plan-districts .note-list{padding-bottom:10px;max-height:220px;overflow:auto}.plan-districts .note-row{display:flex;align-items:center;gap:10px;min-height:44px}.plan-legend{font-size:11px;text-align:center;color:#b6d4c6}.plan-legend .gold{color:#d4b45b}.plan-legend span{color:#7cafcd}
@media(max-width:359px){.topbar{left:6px;right:6px}.brand{padding:6px}.top-actions{gap:0}.top-actions .iconbtn{width:44px;height:44px}.brand strong{font-size:11px}.brand #activeMode{font-size:9px}}
@media(max-height:500px){.city-plan{height:180px}}
/* First iPhone acceptance: match the reference panel using the existing city art. */
.sheet:has(#cityPlan){left:10px;right:10px;bottom:calc(8px + var(--safe-bottom));padding:9px 12px 14px;border-radius:24px;border-color:#609b80;background:linear-gradient(145deg,#123f2f,#08271e);max-height:calc(100dvh - 80px - var(--safe-top) - var(--safe-bottom))}
.sheet:has(#cityPlan) .sheet-head{margin-bottom:14px}.sheet:has(#cityPlan) .sheet-title p{font-size:12px;color:#adc9b9;line-height:1.4}
.city-plan{height:clamp(190px,41dvh,410px);border-color:#85b880;border-radius:19px;background:#719331;box-shadow:inset 0 0 24px #17341660}
.plan-zoom{left:7px;top:7px;border-radius:13px;border:1px solid #6e9d7a;box-shadow:0 3px 9px #09231280}.plan-zoom button{border:0;background:#0b2a20e8}.plan-zoom button+button{border-top:1px solid #5b8265}
#planScale{bottom:12px;left:12px;min-width:34px;text-align:center;font-size:10px;padding-bottom:8px}
#planScale::after{content:'';position:absolute;width:var(--ruler-width,120px);max-width:45vw;left:0;bottom:0;border:solid #f2f4db;border-width:0 2px 2px;height:5px;filter:drop-shadow(0 1px 1px #24341d)}
.plan-districts{margin-top:12px;border-color:#619f82;background:#0c3226a0;border-radius:16px}.plan-districts summary{display:flex;align-items:center;gap:9px;padding:14px 0;list-style:none;font-size:14px}.plan-districts summary::-webkit-details-marker{display:none}.plan-districts summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid #d0e8d9;border-bottom:2px solid #d0e8d9;transform:rotate(45deg);margin-right:4px;margin-top:-4px}.plan-districts[open] summary::after{transform:rotate(225deg);margin-top:4px}
.plan-layers{width:15px;height:15px;border:2px solid #cce5d4;transform:rotate(45deg) scaleY(.7);box-shadow:3px 3px 0 -1px #133c2c,4px 4px 0 0 #cce5d4}
.plan-legend{display:flex;justify-content:space-between;gap:7px;margin:16px 0 0;padding:11px 8px;border:1px solid #386e54;border-radius:16px;background:#0b2e2290;text-align:left;font-size:9px;line-height:1.3}.plan-legend>span{display:flex;align-items:center;gap:6px;color:#ecf3e8;flex:1}.plan-legend small{display:block;color:#b7d0bc;margin-top:3px;font-size:9px}.plan-legend i{display:block;flex-shrink:0;box-shadow:inset 2px 2px 0 #ffffff40,inset -2px -2px 0 #0c293329;border:1px solid #80bad9;border-radius:3px;background:#458bb2;width:18px;height:18px}.plan-legend .legend-town{width:23px;height:23px;background:#c4a154;border-color:#eadb9c}.plan-legend .legend-topic{width:13px;height:13px}
@media(min-width:760px){.sheet:has(#cityPlan){left:50%;right:auto;width:min(640px,calc(100vw - 40px));padding:12px 18px 18px}.plan-legend{padding:14px;font-size:12px}.plan-legend small{font-size:11px}.plan-legend i{width:24px;height:24px}.plan-legend .legend-town{width:30px;height:30px}.plan-legend .legend-topic{width:18px;height:18px}}
@media(max-height:500px){.city-plan{height:170px}.plan-legend{margin-top:9px;padding:7px}.sheet:has(#cityPlan){max-height:calc(100dvh - 54px - var(--safe-top) - var(--safe-bottom))}}