/* Home: the full-screen map with its cartouche, legend, panel and gazetteer */
html,body{height:100%}
body.home{background:var(--m-margin);overflow:hidden;font-size:15px}
#map{position:fixed;inset:0}
.left{position:fixed;z-index:900;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));width:min(300px,calc(100vw - 92px));display:flex;flex-direction:column;gap:10px;max-height:calc(100% - 175px)}
.cartouche{padding:12px 14px 10px;position:relative}
.cartouche::before{content:"";position:absolute;inset:4px;border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent);pointer-events:none}
.cartouche h1{margin:0;font:700 clamp(20px,4.6vw,25px)/1.05 var(--f-text);text-wrap:balance}
.cartouche .sub{margin:5px 0 8px;font:italic 13.5px/1.35 var(--f-text);color:var(--ink-2)}
.cartouche .stamp{position:absolute;right:10px;top:9px}
.stats{display:flex;flex-wrap:wrap;gap:2px 14px;padding-top:7px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.stats b{color:var(--ink);font-weight:700;font-size:16px}
.cartouche nav{display:flex;gap:14px;margin-top:8px;padding-top:7px;border-top:1px solid var(--line);position:relative}
.cartouche nav a{font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:4px 0}
.cartouche nav a:hover{text-decoration:underline}
.legend{display:flex;flex-direction:column;min-height:0}
.leg-h{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:9px 14px;cursor:pointer;font:700 12px var(--f-map);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);min-height:40px}
.leg-h .chev{transition:transform .2s;font-size:12px}
.leg-h[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.leg-body{overflow-y:auto;padding:0 14px 12px;border-top:1px solid var(--line)}
.keys{list-style:none;margin:6px 0 0;padding:0}
.keys label{display:grid;grid-template-columns:18px 30px 1fr;align-items:center;gap:6px;padding:4px 0;cursor:pointer;font-size:14.5px;line-height:1.2}
.keys input{margin:0;width:16px;height:16px;accent-color:#2e4a2c}
.keys small{display:block;font-size:12px;color:var(--ink-2)}
.keys .sym{display:grid;place-items:center;background:var(--m-land);height:26px;border-radius:2px}
.keys li.sub{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
.season{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.season .k{font:700 11px var(--f-map);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.season .yrs button{min-height:30px;min-width:44px;font-size:13.5px}
.season .yrs button[aria-pressed="true"]{background:var(--m-land);color:var(--m-coast);border-color:var(--m-land)}
.right{position:fixed;z-index:900;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.zoom{display:flex;flex-direction:column}
.zoom button{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:22px;line-height:1;font-weight:500}
.zoom button:hover{background:var(--paper-2)}
.zoom button+button{border-top:1px solid var(--line)}
.only-phone{display:none}
.furniture{position:fixed;z-index:850;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:14px;pointer-events:none;color:var(--m-label)}
.rose{width:86px;height:86px}
.scale{font-size:11.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-shadow:0 0 4px var(--m-sea)}
.scale .bars{display:flex;height:5px;border:1px solid var(--m-coast);margin:3px 0 2px}
.scale .bars i{flex:1}
.scale .bars i:nth-child(odd){background:var(--m-coast)}
.scale .ticks{display:flex;justify-content:space-between}
.scale .xy{margin-top:5px;color:var(--m-label-2);font-size:11px;min-height:1em}
@media (hover:none){.scale .xy{display:none}}
.loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--m-label);font-weight:600;z-index:50}

/* panel: bottom sheet on phones, side panel on wider screens */
.sheet{position:fixed;z-index:1000;background:var(--paper);border:var(--edge);box-shadow:var(--lift);display:flex;flex-direction:column;overflow:hidden}
.sheet[hidden]{display:none}
@media (max-width:759px){
  .sheet{left:0;right:0;bottom:0;height:86%;border-radius:10px 10px 0 0;border-bottom:0;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .sheet.peek{transform:translateY(calc(100% - 210px - env(safe-area-inset-bottom,0px)))}
  .sheet.open{transform:none}
}
@media (min-width:760px){
  .sheet{top:12px;bottom:12px;right:12px;width:min(440px,42vw);border-radius:3px;transform:translateX(calc(100% + 24px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .sheet.peek,.sheet.open{transform:none}
  .grab{display:none}
}
@media (prefers-reduced-motion:reduce){.sheet,.pin,.leg-h .chev{transition:none}}
.grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:9px auto 0;flex:none}
.sheet-head{padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);flex:none;cursor:pointer}
.sheet-head .cover{width:64px;height:64px;object-fit:cover;flex:none;background:var(--paper-2);border:var(--edge)}
.sheet-head .t{min-width:0;flex:1}
.sheet-head h2{margin:2px 0 2px;font:700 23px/1.1 var(--f-text);text-wrap:balance}
.where{color:var(--ink-2);font-size:14.5px}
.x{flex:none;border:var(--edge);background:var(--paper-2);width:40px;height:40px;cursor:pointer;font-size:20px;line-height:1;border-radius:2px}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pagelink{display:flex;justify-content:space-between;align-items:center;margin:10px 0 4px;padding:10px 12px;border:var(--edge);text-decoration:none;font-weight:600;background:var(--paper-2)}
.pagelink:hover{border-color:var(--accent)}

/* gazetteer */
.list{position:fixed;inset:0;z-index:1100;background:var(--paper);display:flex;flex-direction:column}
.list[hidden]{display:none}
.list-head{padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.list-head .row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.list-head h2{margin:0;font:700 24px var(--f-text)}
.list-body{overflow-y:auto;padding:4px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.group{font:700 11.5px var(--f-map);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 6px}
.item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:56px}
.item img,.item .noimg{width:48px;height:48px;object-fit:cover;flex:none;background:var(--paper-2);border-radius:2px}
.item .t{flex:1;min-width:0}
.item .n{display:block;font:600 17px var(--f-text)}
.item .w{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:759px){
  .left{max-height:calc(100% - 150px)}
  .cartouche{padding:10px 12px 9px}
  .cartouche .sub{display:none}
  .stats{font-size:13px;gap:0 10px}.stats b{font-size:15px}
  .legend{position:fixed;z-index:950;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-height:calc(100% - 40px)}
  .legend[hidden]{display:none}
  .legend .leg-h .chev{display:none}
  .only-phone{display:inline-flex}
  .rose{width:62px;height:62px}
}
@media (min-width:760px){ .legend[hidden]{display:flex} .leg-close{display:none} }