/* ------------------------------------------------ vapordon window chrome

   always on, even with the skin switched off, so the bring it back button stays reachable
   colours are spelled out here on purpose, the skin vars vanish when the skin is off
*/

html.vapor-framed:not(.vapor-off) { padding-top: 50px !important; box-sizing: border-box !important; --vapor-vh: calc(100vh - 50px); }
html.vapor-framed.vapor-mini:not(.vapor-off) { padding-top: 28px !important; --vapor-vh: calc(100vh - 28px); }
html.vapor-mini #vapor-menu { display: none !important; }
/* map pages pin stuff with absolute + inset 0, this makes them pin under the title bar instead */
html.vapor-framed:not(.vapor-off) body { position: relative !important; min-height: var(--vapor-vh); }

#vapor-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  background: #4c5844;
  font: 12px Tahoma, Verdana, sans-serif;
  color: #d8ded3;
  user-select: none;
  -webkit-font-smoothing: none;
  text-align: left;
  line-height: normal;
}
#vapor-chrome * { font-family: Tahoma, Verdana, sans-serif !important; box-sizing: border-box; letter-spacing: 0; }
#vapor-cap { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; }
#vapor-cap .home { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; text-decoration: none; }
#vapor-cap img { width: 16px; height: 16px; image-rendering: pixelated; flex-shrink: 0; }
/* the line icons get a light ring underneath, rings.py makes those from the dark pixels only */
#vapor-cap img { background: center / 16px no-repeat; }
#vapor-cap img[src$="/stego.png"] { background-image: url("/__vapor/skin/icons/rings/stego.png"); }
#vapor-cap img[src$="/drive.png"] { background-image: url("/__vapor/skin/icons/rings/drive.png"); }
#vapor-cap img[src$="/naut.png"] { background-image: url("/__vapor/skin/icons/rings/naut.png"); }
#vapor-cap img[src$="/heliodon.png"] { background-image: url("/__vapor/skin/icons/rings/heliodon.png"); }
#vapor-cap img[src$="/velociraptor.png"] { background-image: url("/__vapor/skin/icons/rings/velociraptor.png"); }
#vapor-cap img[src$="/chronodon.png"] { background-image: url("/__vapor/skin/icons/rings/chronodon.png"); }
#vapor-cap .t {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 13px Verdana, Tahoma, sans-serif !important; color: #fff;
}
#vapor-cap .tb {
  width: 18px; height: 18px; padding: 0 !important; display: grid; place-items: center; cursor: default; flex-shrink: 0;
  background: #4c5844 !important; border: 1px solid !important; border-color: #889180 #282e22 #282e22 #889180 !important;
  outline: none !important; min-width: 0 !important; min-height: 0 !important;
}
#vapor-cap .tb:active { border-color: #282e22 #889180 #889180 #282e22 !important; }
#vapor-cap .tb svg { display: block; }
#vapor-menu {
  height: 22px; display: flex; align-items: stretch; padding: 0 4px;
  border-bottom: 1px solid #282e22; box-shadow: 0 1px 0 #889180;
  overflow-x: auto; scrollbar-width: none;
}
#vapor-menu::-webkit-scrollbar { display: none; }
#vapor-menu a {
  padding: 0 8px; display: flex; align-items: center; white-space: nowrap;
  color: #a0aa95 !important; text-decoration: none !important; background: transparent;
  font-size: 12px !important;
}
#vapor-menu a:hover, #vapor-menu a.here { background: #958831; color: #fff !important; }
#vapor-menu .gap { flex: 1; min-width: 12px; }
#vapor-edge {
  position: fixed; inset: 0; z-index: 2147483001; pointer-events: none;
  border: 1px solid; border-color: #889180 #282e22 #282e22 #889180;
}
#vapor-grip {
  position: fixed; right: 2px; bottom: 2px; width: 12px; height: 12px; z-index: 2147483001; pointer-events: none;
  background: linear-gradient(135deg, transparent 45%, #889180 45%, #889180 52%, transparent 52%,
              transparent 64%, #889180 64%, #889180 71%, transparent 71%,
              transparent 83%, #889180 83%, #889180 90%, transparent 90%);
}

/* skin off: the chrome hides away except a tiny stego to bring it back */
html.vapor-off #vapor-chrome, html.vapor-off #vapor-edge, html.vapor-off #vapor-grip { display: none; }
#vapor-back {
  display: none; position: fixed; right: 10px; bottom: 10px; z-index: 2147483002;
  width: 34px; height: 34px; padding: 0; cursor: pointer; border-radius: 0;
  background: #4c5844; place-items: center;
  border: 1px solid; border-color: #889180 #282e22 #282e22 #889180;
}
/* the stego sits on ::after so its ring doesnt also ring the button */
#vapor-back::after { content: ""; display: block; width: 16px; height: 16px;
  background: url("/__vapor/skin/icons/stego.png") center / 16px no-repeat, url("/__vapor/skin/icons/rings/stego.png") center / 16px no-repeat;
  image-rendering: pixelated; }
html.vapor-off #vapor-back { display: grid; }