/* The map fills the viewport below the navbar, so the page itself
   must not scroll. */
body.iw-body { overflow: hidden; }

/* ============================================================
   Amalgam — innerworld map
   Scoped under #iw so nothing leaks into the shared stylesheet.
   ============================================================ */

/* Everything here is expressed in the app's theme variables, so the
   map follows whatever theme.js has set. The hex values are only
   fallbacks for when a variable is missing. */
#iw{
  --iw-bg:     var(--bg, #1a1e26);
  --iw-panel:  var(--surface, #151920);
  --iw-line:   var(--border, #2a3138);
  --iw-accent: var(--accent, #508dc7);
  --iw-text:   var(--text, #d6dbe2);
  --iw-dim:    var(--text-muted, #7c8592);
  --iw-faint:  var(--text-muted, #4d565f);
  --iw-sunken: var(--bg-deep, #11141a);

  position:fixed;
  inset:var(--amalgam-nav-height, 0px) 0 0 0;   /* set at runtime by syncTop() */
  display:flex;
  background:var(--iw-bg);
  color:var(--iw-text);
  font-family:inherit;
  overflow:hidden;
}

#iw *{box-sizing:border-box;}
#iw :focus-visible{outline:1px solid var(--iw-accent);outline-offset:2px;}

/* ---------- stage ---------- */
#iw-stage{position:relative;flex:1;min-width:0;}
#iw-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
#iw-canvas.is-dragging{cursor:grabbing;}

.iw-overlay{position:absolute;pointer-events:none;}

#iw-topbar{
  top:0;left:0;right:0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;pointer-events:auto;
  background:linear-gradient(to bottom,var(--iw-bg) 55%,transparent);
}
.iw-field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--iw-dim);}
.iw-right{display:flex;align-items:center;gap:8px;margin-left:auto;}

#iw input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:92px;height:1px;background:var(--iw-line);outline:none;
}
#iw input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;
  background:var(--iw-accent);border-radius:0;cursor:pointer;
}
#iw input[type=range]::-moz-range-thumb{
  width:11px;height:11px;background:var(--iw-accent);
  border:0;border-radius:0;cursor:pointer;
}

.iw-chips{display:flex;gap:6px;flex-wrap:wrap;}
.iw-chip{
  font-family:inherit;font-size:13px;padding:3px 10px;
  background:transparent;color:var(--iw-dim);
  border:1px solid var(--iw-line);border-radius:0;cursor:pointer;
}
.iw-chip[aria-pressed="true"]{color:var(--iw-text);border-color:var(--iw-accent);}
.iw-chip:hover{color:var(--iw-text);}

/* ---------- search ---------- */
.iw-search{position:relative;}
#iw-search{
  width:150px;font-family:inherit;font-size:13px;
  background:var(--iw-sunken);color:var(--iw-text);
  border:1px solid var(--iw-line);border-radius:0;padding:4px 9px;
}
#iw-search:focus{border-color:var(--iw-accent);outline:none;width:200px;}
#iw-results{
  display:none;position:absolute;top:100%;right:0;z-index:6;
  width:250px;max-height:280px;overflow-y:auto;
  margin:3px 0 0;padding:0;list-style:none;
  background:var(--iw-panel);border:1px solid var(--iw-line);
}
#iw-results.is-open{display:block;}
#iw-results li{margin:0;}
#iw-results button{
  display:block;width:100%;text-align:left;
  font-family:inherit;font-size:14px;padding:6px 10px;
  background:none;border:0;color:var(--iw-text);cursor:pointer;
}
#iw-results button:hover,#iw-results button:focus{background:var(--iw-sunken);color:var(--iw-accent);}
#iw-results .iw-res-layers{display:block;font-size:12px;color:var(--iw-faint);}

/* ---------- legend ---------- */
#iw-legend{left:16px;bottom:14px;font-size:12.5px;color:var(--iw-faint);line-height:1.95;}
#iw-legend b{color:var(--iw-dim);font-weight:normal;}
#iw-legend svg{vertical-align:middle;margin-right:6px;}
#iw-legend svg .g{stroke:currentColor;fill:none;}
#iw-legend svg .gf{fill:currentColor;stroke:none;}
#iw-legend svg .a{stroke:var(--iw-accent);fill:none;}

/* ---------- panel ---------- */
#iw-panel{
  width:340px;flex:none;
  background:var(--iw-panel);
  border-left:1px solid var(--iw-line);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#iw-banner{
  display:none;width:100%;height:132px;object-fit:cover;
  border-bottom:1px solid var(--iw-line);background:var(--iw-sunken);
}
#iw-inner{padding:20px 22px 34px;}

#iw h1{font-size:27px;font-weight:normal;margin:0 0 3px;line-height:1.15;}
.iw-tags{font-size:13px;color:var(--iw-dim);margin-bottom:15px;}
.iw-note{font-size:15px;line-height:1.65;color:var(--iw-dim);margin:0 0 20px;white-space:pre-wrap;}

.iw-group{margin-bottom:18px;}
.iw-group .iw-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--iw-faint);
  border-bottom:1px solid var(--iw-line);
  padding-bottom:5px;margin-bottom:8px;
}
#iw ul.iw-list{list-style:none;margin:0;padding:0;}
#iw ul.iw-list li{margin:0 0 6px;font-size:15px;line-height:1.45;}
.iw-linkbtn{
  font-family:inherit;font-size:15px;background:none;border:0;padding:0;
  color:var(--iw-text);cursor:pointer;text-align:left;
  border-bottom:1px solid transparent;
}
.iw-linkbtn:hover{color:var(--iw-accent);border-bottom-color:var(--iw-accent);}
.iw-kind{color:var(--iw-faint);font-size:13px;}
.iw-empty{color:var(--iw-faint);font-size:14px;}
.iw-mini{
  font-family:inherit;font-size:12.5px;background:none;border:0;
  padding:0 0 0 8px;color:var(--iw-faint);cursor:pointer;
}
.iw-mini:hover{color:var(--iw-accent);}

.iw-rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.iw-btn{
  font-family:inherit;font-size:14px;padding:6px 13px;
  background:transparent;color:var(--iw-text);
  border:1px solid var(--iw-line);border-radius:0;cursor:pointer;
}
.iw-btn:hover{border-color:var(--iw-accent);color:var(--iw-accent);}
.iw-btn.iw-primary{border-color:var(--iw-accent);color:var(--iw-accent);}
.iw-btn.iw-danger:hover{border-color:#a45;color:#c67;}
.iw-btn[disabled]{opacity:.5;cursor:default;border-color:var(--iw-line);color:var(--iw-dim);}

/* ---------- forms ---------- */
.iw-f{display:block;font-size:13px;color:var(--iw-faint);margin:0 0 4px;}
.iw-fwrap{margin-bottom:13px;}
#iw input[type=text],#iw textarea,#iw select{
  width:100%;font-family:inherit;font-size:15px;
  background:var(--iw-sunken);color:var(--iw-text);
  border:1px solid var(--iw-line);border-radius:0;padding:7px 9px;
}
#iw textarea{resize:vertical;min-height:80px;line-height:1.55;}
#iw input[type=text]:focus,#iw textarea:focus,#iw select:focus{
  border-color:var(--iw-accent);outline:none;
}
#iw input.iw-bad{border-color:#a45;}
.iw-checkline{
  display:flex;align-items:flex-start;gap:8px;
  font-size:14px;color:var(--iw-dim);line-height:1.45;margin-bottom:14px;
}
.iw-checkline input{margin-top:4px;accent-color:var(--iw-accent);}
.iw-hint{font-size:12.5px;color:var(--iw-faint);line-height:1.5;margin:4px 0 0;}

/* ---------- data sheet ---------- */
#iw-sheet{
  position:fixed;inset:0;z-index:50;
  background:color-mix(in srgb, var(--bg, #0c0f14) 88%, transparent);
  display:none;align-items:center;justify-content:center;padding:24px;
  font-family:inherit;color:var(--text, #d6dbe2);
}
#iw-sheet.is-open{display:flex;}
#iw-sheetbox{
  width:min(680px,100%);max-height:100%;
  display:flex;flex-direction:column;
  background:var(--surface, #151920);
  border:1px solid var(--border, #2a3138);padding:20px;
}
#iw-sheetbox h2{font-size:20px;font-weight:normal;margin:0 0 10px;}
#iw-sheettext{
  flex:1;min-height:260px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  background:var(--bg-deep, #11141a);color:var(--text, #d6dbe2);
  border:1px solid var(--border, #2a3138);
  border-radius:0;padding:9px;resize:none;
}
#iw-sheettext:focus{border-color:var(--accent, #508dc7);outline:none;}
#iw-sheet .iw-hint{color:var(--text-muted, #4d565f);margin:8px 0 0;}

/* ---------- toast ---------- */
#iw-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  z-index:60;pointer-events:none;opacity:0;
  font-family:inherit;font-size:14px;
  background:var(--surface, #151920);color:var(--text, #d6dbe2);
  border:1px solid var(--border, #2a3138);padding:8px 15px;
  transition:opacity .18s ease,transform .18s ease;
}
#iw-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}
#iw-toast.is-bad{border-color:#a45;color:#c67;}

/* ---------- panel collapse (small screens) ---------- */
.iw-collapse{
  display:none;position:absolute;right:12px;bottom:12px;z-index:5;
  font-family:inherit;font-size:13px;padding:4px 12px;
  background:var(--iw-panel);color:var(--iw-dim);
  border:1px solid var(--iw-line);border-radius:0;cursor:pointer;
}

@media (max-width:820px){
  #iw{flex-direction:column;}
  #iw-stage{flex:1 1 50%;min-height:0;}
  #iw-panel{
    width:auto;flex:1 1 50%;min-height:0;
    border-left:0;border-top:1px solid var(--iw-line);
  }
  #iw.is-collapsed #iw-panel{display:none;}
  #iw.is-collapsed #iw-stage{flex:1 1 100%;}
  .iw-collapse{display:block;}
  #iw-banner{height:104px;}
  #iw-inner{padding:16px 18px 28px;}
  #iw h1{font-size:23px;}
  #iw-legend{display:none;}
  #iw-search{width:118px;}
  #iw-search:focus{width:150px;}
  #iw-results{width:220px;}
}

@media (prefers-reduced-motion:reduce){
  #iw-toast{transition:none;}
}