/* vgis_base.css version v2 — 2026-03-27T21:15:00Z — improves vector-only Mons label halo/contrast in projected views. */
/* VGIS base.css version v2 — 2026-03-26T08:07:07Z — added compact bottom-left live network traffic HUD item styling. */
/* VGIS reorganized stylesheet: base + layout + legend shell */
/* Extracted unchanged from app.css lines 1-392 to reduce search surface. */

/* Extracted from index.html */

  
  /* iphone huzo */
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overscroll-behavior-y:none;
}

#map{
  position:fixed;
  inset:0;
  background:#000;
}

/* Black behind the map everywhere: Leaflet's default .leaflet-container background is light grey,
   which shows around the globe in the clipped (polar/Lambert/Robinson) projections and at the
   dateline edges. Space is black. */
.leaflet-container{
  background:#000;
}
html, body{
  background:#000;
}
	
	
	
	#loadingOverlay{
  position:fixed;
  inset:0;
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
}

#loadingOverlayCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:min(320px, calc(100vw - 32px));
  max-width:min(420px, calc(100vw - 32px));
  padding:14px 16px;
  background:rgba(0,0,0,0.55);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,0.28);
}

#loadingText{
  color:white;
  font:18px/1.3 sans-serif;
  text-align:center;
}

#loadingDismissBtn{
  display:none;
  appearance:none;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.12);
  color:#fff;
  font:13px/1.2 sans-serif;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}

#loadingDismissBtn:hover{
  background:rgba(255,255,255,0.18);
}

/* Non-invasive per-layer loading toast. Sits just above the bottom-left coordinate HUD, never blocks
   the map (pointer-events:none), so layers stream in while the page stays fully interactive. */
#vgisLayerLoadingToast{
  position:fixed;
  left:12px;
  bottom:44px;
  z-index:20000;
  display:none;
  align-items:center;
  gap:8px;
  max-width:min(280px, calc(100vw - 24px));
  padding:7px 12px 7px 10px;
  background:rgba(20,20,24,0.82);
  color:#fff;
  font:13px/1.25 sans-serif;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.18s ease;
}
#vgisLayerLoadingToast.is-visible{
  display:flex;
  opacity:1;
}
#vgisLayerLoadingToast .vgis-llt-spinner{
  flex:0 0 auto;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:vgisLltSpin 0.8s linear infinite;
}
#vgisLayerLoadingToast .vgis-llt-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@keyframes vgisLltSpin{ to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  #vgisLayerLoadingToast .vgis-llt-spinner{ animation:none; }
}



	/* HUD coordinate display (lat/lon + km/px box) */ 
		.coords{background:rgba(255,255,255,.85);padding:2px 4px;font:12px/1.3 monospace}

.leaflet-control-venushud #hudContent .vh-item--net{
  flex:0 0 auto;
  align-self:flex-end;
  min-width:auto;
}

.leaflet-control-venushud #hudContent .vh-value--net{
  display:inline-block;
  white-space:nowrap;
  font:12px/1.2 monospace;
}
			

	/* Fixed legend panel (layer list + checkboxes) on bottom-right corner */

.legend{
  --legend-panel-height:min(60vh, 520px);
  position:fixed;
  right:0px;           /* közelebb a jobb szélhez */
  bottom:40px;
  background:#ffffffee;
  border:1px solid #ccc;
  border-radius:22px 0 0 28px; /* lekerekített sarkok */
  font:12px/1.2 sans-serif;
  width:258px;
  height:var(--legend-panel-height);
  min-height:180px;
  max-height:calc(100vh - 58px);
  z-index:20000;
  box-sizing:border-box;
  overflow:hidden;
  transition:transform .24s ease, width .18s ease;
  will-change:transform;
  display:flex;
  flex-direction:column;
}

.legend.is-two-column{
  width:min(568px, calc(100vw - 12px));
}

.legend .head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px 18px;
  border-bottom:1px solid #ddd;
  user-select:none;
  flex:0 0 auto;
  position:relative;
}

.legend .head .toggle{
  margin-left:0;
  font-weight:700;
}

#legendTitle{
  flex:1 1 auto;
  margin-right:auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:800 13px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing:0;
}

#langSelect{
  margin-right:0 !important;
  width:58px;
  min-width:58px;
  padding:4px 6px;
  flex:0 0 auto;
}

.legend-view-toggle{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#222;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  font:700 15px/1 sans-serif;
  flex:0 0 32px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  overflow:hidden;
}

.legend-view-toggle svg{
  display:block;
}

.legend-view-toggle:hover{
  background:#f4f4f4;
}

.legend-view-toggle.is-active{
  background:#ececec;
}

.legend-resize-grip{
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  width:64px;
  height:7px;
  margin:0;
  border-radius:999px;
  background:#cfcfcf;
  cursor:ns-resize;
  touch-action:none;
}

.legend.is-resizing{
  transition:none;
}

.legend.is-collapsed{
  transform:translateX(calc(100% - 46px));
  height:auto;
  min-height:0;
}

.legend.is-collapsed .head{
  position:relative;
  min-height:48px;
  padding-bottom:10px;
  border-bottom:none;
}

.legend.is-collapsed .legend-resize-grip{
  display:none;
}

.legend.is-collapsed .body{
  display:none;
}

.legend.is-collapsed #legendTitle,
.legend.is-collapsed #langSelect{
  opacity:0;
  pointer-events:none;
}

.legend.is-collapsed .head .toggle{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  margin-left:0;
}

.legend .body{
  padding:8px 10px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;      /* nincs vízszintes csúszka */
  word-break:break-word;  /* hosszú szöveg törik */
  scrollbar-gutter:stable;
  box-sizing:border-box;
}

.legend-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:start;
}

.legend-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:start;
}

.legend.is-two-column .legend-section{
  margin:0;
  min-width:0;
}

.legend.is-two-column .legend-section__head .row,
.legend.is-two-column .legend-section__body{
  min-width:0;
}

@media (max-width: 720px){
  .legend.is-two-column{
    width:min(540px, calc(100vw - 8px));
  }
}

    .legend .row{display:flex;align-items:center;gap:3px;margin:4px 0;min-width:0}
    .legend .row label{cursor:pointer;flex:1 1 auto;min-width:0;line-height:1.15}
    .legend a{color:#0645ad; text-decoration:underline}
    .chip{display:inline-block;vertical-align:middle}
    .chip.line{width:14px;height:0;border-top:2px solid #000}
    .chip.fill{width:14px;height:12px;border:1px solid #000}
    .chip.dashed{width:14px;height:0;border-top:2px dashed #000}
    .chip.orange{border-color:orange;border-top-color:orange}
    .chip.red{border-color:red;border-top-color:red}
	.chip.blue{border-color:blue;border-top-color:blue}
    .chip.purple{border-color:purple;border-top-color:purple}
	
	
	.narrative-pin-icon{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.narrative-pin{
  position:relative;
  width:26px;
  height:38px;
}

.narrative-pin::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:26px;
  height:26px;
  background:#8e44ad;
  border:2px solid #ffffff;
  border-radius:50% 50% 50% 0;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transform:translateX(-50%) rotate(-45deg);
  transform-origin:center;
}

.narrative-pin::after{
  content:'';
  position:absolute;
  left:50%;
  top:7px;
  width:10px;
  height:10px;
  background:#ffffff;
  border-radius:50%;
  transform:translateX(-50%);
}


    .chip.yellowfill{background:yellow;opacity:.35;border:1px solid #aa0}
    .chip.greyfill{background:#888;opacity:.3;border:1px solid #666}
    .chip.pinkfill{background:pink;opacity:.55;border:1px solid #d36}
	.chip.orangefill {background:orange;opacity:.55;border:1px solid #a50;   /* sötétebb narancs keret */}
	.chip.dots{width:14px;height:12px;background:repeating-radial-gradient(#000 0 1px, transparent 1px 3px);background-color:#ff0;   /* sárga alap */ border:1px solid #aa0;   /* sárga keret */}    .chip.icon{width:18px;height:18px}
    .label{background:transparent;border:0;box-shadow:none;color:#111;font-weight:600}
	.leaflet-tooltip.label::before{display:none;}

/* Nomenclature point+name label */
@font-face{
  font-family:"VGIS Vinque";
  src:
    url("/fonts/vinque.oft") format("opentype"),
    url("fonts/vinque.oft") format("opentype"),
    url("fonts/vinque.otf") format("opentype"),
    url("../ttf/vinque.otf") format("opentype");
  font-display:swap;
}

@font-face{
  font-family:"VGIS Widmanstadius New";
  src:url("fonts/WidmanstadiusNew-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Widmanstadius New";
  src:url("fonts/WidmanstadiusNew-Regular.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Widmanstadius New";
  src:url("fonts/WidmanstadiusNew-Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Widmanstadius New";
  src:url("fonts/WidmanstadiusNew-Italic.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Widmanstadius New";
  src:url("fonts/WidmanstadiusNew-Italic.ttf") format("truetype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Gill Sans";
  src:url("fonts/Gill Sans Medium.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Gill Sans";
  src:url("fonts/Gill Sans Medium.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Gill Sans";
  src:url("fonts/Gill Sans Heavy.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"VGIS Gill Sans";
  src:url("fonts/Gill Sans Heavy.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --nomen-font-family: Roboto, Arial, Helvetica, sans-serif;
  --nomen-font-family-vinque: "VGIS Vinque", Roboto, Arial, Helvetica, sans-serif;
  --nomen-font-family-widmanstadius: "VGIS Widmanstadius New", Roboto, Arial, Helvetica, sans-serif;
  --nomen-font-family-gill: "VGIS Gill Sans", Roboto, Arial, Helvetica, sans-serif;
  --nomen-active-font-family: var(--nomen-font-family);
  --nomen-fill-red: #d01818;

  /* curved legyen az alap */
   --nomen-fill-default: #ffffff;
  --nomen-fill-mons: #000000;
  --nomen-fill-crater: #000000;

  --nomen-weight-default: 600;
  --nomen-weight-mons: 700;
  --nomen-weight-crater: 900;

  --nomen-stroke-default: rgba(0,0,0,0.9);
  --nomen-stroke-channel: #123a8a;
  --nomen-stroke-crater: rgba(255,255,255,0.6);

  --nomen-stroke-width-default: 1.15;
  --nomen-stroke-width-crater: 2;

  --nomen-shadow-default:
    -1px -1px 0 rgba(0,0,0,0.45),
     1px -1px 0 rgba(0,0,0,0.45),
    -1px  1px 0 rgba(0,0,0,0.45),
     1px  1px 0 rgba(0,0,0,0.45);
  --nomen-shadow-crater:
    -2px -2px 0 rgba(255,255,255,0.6),
     2px -2px 0 rgba(255,255,255,0.6),
    -2px  2px 0 rgba(255,255,255,0.6),
     2px  2px 0 rgba(255,255,255,0.6),
     0 0 5px rgba(255,255,255,0.6);
}

:root[data-nomen-font-mode="vinque"]{
  --nomen-active-font-family: var(--nomen-font-family-vinque);
}

:root[data-nomen-font-mode="widmanstadius"]{
  --nomen-active-font-family: var(--nomen-font-family-widmanstadius);
}

:root[data-nomen-font-mode="gill"]{
  --nomen-active-font-family: var(--nomen-font-family-gill);
}

.nomen-label,
.curve-name-label{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.curve-name-label__inner,
.crater-name-label{
  display:inline-block;
  white-space:nowrap;
  font-family: var(--nomen-active-font-family);
  line-height:1;
  letter-spacing:0;
  transform-origin:50% 50%;
  pointer-events:none;
  user-select:none;
}

.curve-name-label__inner{
  color: var(--nomen-fill-default);
  font-weight: var(--nomen-weight-default);
  text-shadow: var(--nomen-shadow-default);
}

.curve-name-label--mons .curve-name-label__inner{
  color: #000000;
  font-weight: var(--nomen-weight-mons);
  text-shadow: var(--nomen-shadow-default);
}

.crater-name-label{
  color: var(--nomen-fill-crater);
  font-weight: var(--nomen-weight-crater);
  text-shadow: var(--nomen-shadow-crater);
}

body.vgis-vector-only-projection .curve-name-label--mons .curve-name-label__inner{
  color:#111111;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.96),
     1px -1px 0 rgba(255,255,255,0.96),
    -1px  1px 0 rgba(255,255,255,0.96),
     1px  1px 0 rgba(255,255,255,0.96),
     0 0 5px rgba(255,255,255,0.92);
}

	
    .ctrl{margin:6px 0}
    .ctrl label{display:block;margin-bottom:2px}